Web Analytics Made Easy -
StatCounter How to resize button in this script - CodingForum

Announcement

Collapse
No announcement yet.

How to resize button in this script

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • How to resize button in this script

    I want to make the copy button generated in this script bigger, both wider anf higher, and i'm not sure how to do that inside the script tags.

    Code:
    <script type="text/javascript">
            function selectElementContents(el) 
    {
        // Copy textarea, pre, div, etc.
    	if (document.body.createTextRange) {
            // IE 
            var textRange = document.body.createTextRange();
            textRange.moveToElementText(el);
            textRange.select();
            textRange.execCommand("Copy");     
        }
    	else if (window.getSelection && document.createRange) {
            // non-IE
            var range = document.createRange();
            range.selectNodeContents(el);
            var sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range); 
            try {  
    		    var successful = document.execCommand('copy');  
    		    var msg = successful ? 'successful' : 'unsuccessful';  
    		    console.log('Copy command was ' + msg);  
    		} catch(err) {  
    		    console.log('Oops, unable to copy');  
    		} 
        }
    } // end function selectElementContents(el) 
    
    function make_copy_button(el)
    {
    	var copy_btn = document.createElement('input');
    	copy_btn.type = "button";
    	el.parentNode.insertBefore(copy_btn, el.nextSibling);
    	copy_btn.onclick = function() { selectElementContents(el); };
    	
    	if (document.queryCommandSupported("copy") || parseInt(navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)[2]) >= 42)
    	{
    		// Copy works with IE 4+, Chrome 42+, Firefox 41+, Opera 29+
    		copy_btn.value = "Klikk og kopier til utklippstavlen din og lim inn i BKL meldingen";
    	}	
    	else
    	{
    		// Select only for Safari and older Chrome, Firefox and Opera
    		copy_btn.value = "Select All (then press CTRL+C to Copy)";
    	}
    }
    /* Note: document.queryCommandSupported("copy") should return "true" on browsers that support copy
    	but there was a bug in Chrome versions 42 to 47 that makes it return "false".  So in those
    	versions of Chrome feature detection does not work!
    	See https://code.google.com/p/chromium/issues/detail?id=476508
    */
    
    make_copy_button(document.getElementById("markup"));
        </script>
    Would be nice if anyone could show me/teach me how to make the button bigger :-)

  • #2
    Hi there Mortennordby,

    try it like this, perhaps...

    Code:
    [color=navy]
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>untitled document</title>
    
    <!--<link rel="stylesheet" href="screen.css" media="screen">-->
    
    <style media="screen">
    body {
        background-color: rgba(240,240,240,1);
     }
    [color=red]#kopier[/color] {
        display: block;
        padding: 1em;
        margin: auto;
        border: 0.2em solid rgba(102,102,102,1);
        border-radius: 1em;
        font-size: 1.5em;
        background-image: linear-gradient(to bottom, rgba(255,255,255,1),rgba(153,153,153,1));
        box-shadow: 0.25em 0.25em 0.25em rgba(0,0,0,0.5);
     }
    </style>
    
    </head>
    <body>
    
    <div id="markup"></div>
    
    <script>
    (function() {
       'use strict';
            function selectElementContents(el) 
    {
        // Copy textarea, pre, div, etc.
    	if (document.body.createTextRange) {
            // IE 
            var textRange = document.body.createTextRange();
            textRange.moveToElementText(el);
            textRange.select();
            textRange.execCommand("Copy");     
        }
    	else if (window.getSelection && document.createRange) {
            // non-IE
            var range = document.createRange();
            range.selectNodeContents(el);
            var sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range); 
            try {  
    		    var successful = document.execCommand('copy');  
    		    var msg = successful ? 'successful' : 'unsuccessful';  
    		    console.log('Copy command was ' + msg);  
    		} catch(err) {  
    		    console.log('Oops, unable to copy');  
    		} 
        }
    } // end function selectElementContents(el) 
    
    function make_copy_button(el)
    {
    	var copy_btn = document.createElement('input');
            [color=red]copy_btn.setAttribute('id','kopier');[/color]
    	copy_btn.type = "button";
    	el.parentNode.insertBefore(copy_btn, el.nextSibling);
    	copy_btn.onclick = function() { selectElementContents(el); };
    	
    	if (document.queryCommandSupported("copy") || parseInt(navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)[2]) >= 42)
    	{
    		// Copy works with IE 4+, Chrome 42+, Firefox 41+, Opera 29+
    		copy_btn.value = "Klikk og kopier til utklippstavlen din og lim inn i BKL meldingen";
    	}	
    	else
    	{
    		// Select only for Safari and older Chrome, Firefox and Opera
    		copy_btn.value = "Select All (then press CTRL+C to Copy)";
    	}
    }
    /* Note: document.queryCommandSupported("copy") should return "true" on browsers that support copy
    	but there was a bug in Chrome versions 42 to 47 that makes it return "false".  So in those
    	versions of Chrome feature detection does not work!
    	See https://code.google.com/p/chromium/issues/detail?id=476508
    */
    
       make_copy_button(document.getElementById("markup"));
    }());
    </script>
    </body>
    </html>[/color]

    coothead
    ~ the original bald headed old fart ~

    Comment

    Working...
    X