Complex

These scripts are more complex or use advanced features.

ReturnToTop

This script enables functionality for a button to scroll the webpage back to the top as used on this website.

This script needs a "button" to be built in the webpage, which is normally hidden by CSS. An example would be an HTML button:

<button onclick="topFunction()" id="returnToTop" title="Go to top" style="display:none;position:fixed;bottom:12px;right:12px;z-index:99;border:none;outline:none;background-color:red;color:white;cursor:pointer;padding:10px;border-radius:10px;font-size:18px;">Top</button>

window.onscroll = function () {
    scrollFunction()
};

function scrollFunction() {
    if ( document.body.scrollTop > 20 || document.documentElement.scrollTop > 20 ) {
        document.getElementById( "returnToTop" ).style.display = "block";
    } else {
        document.getElementById( "returnToTop" ).style.display = "none";
    }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
    document.body.scrollTop = 0; // For Safari
    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}

SetClipboardText

This script allows for the creation of the "Copy text" buttons used on this website.

This script will copy the text contained inside the first <pre> tag that is inside the button's parent's parent. Whew! Here is the structure of HTML:

<div>
  <h1>Header Text <button>Button Text</button></h1>
  <pre>Text to be copied</pre>
  <pre>Text that will be ignored</pre>
  <pre>Text that will be ignored</pre>
</div>

This script also needs a "button" to be built in the webpage. An example would be an HTML button:

<button onclick="setClipboardText(this)" style="margin-left:5em;font-size:50%;vertical-align:middle;color:black;border:none;border-radius:.5em;padding:.33em;">Copy text</button>

function setClipboardText(obj) {
  // Based on a script posted on https://makitweb.com by Yogesh Singh
  // https://makitweb.com/how-to-copying-content-to-the-clipboard-with-javascript/

  var preColl = obj.parentNode.parentNode.getElementsByTagName("pre");
  var text = preColl[Object.keys(preColl)[0]].innerHTML;
  //alert( "here: " + text );
  var id = "mycustom-clipboard-textarea-hidden-id";
  var existsTextarea = document.getElementById(id);

  if (!existsTextarea) {
    console.log("Creating textarea");
    var textarea = document.createElement("textarea");
    textarea.id = id;
    // Place in top-left corner of screen regardless of scroll position.
    textarea.style.position = 'fixed';
    textarea.style.top = 0;
    textarea.style.left = 0;

    // Ensure it has a small width and height. Setting to 1px / 1em
    // doesn't work as this gives a negative w/h on some browsers.
    textarea.style.width = '1px';
    textarea.style.height = '1px';

    // We don't need padding, reducing the size if it does flash render.
    textarea.style.padding = 0;

    // Clean up any borders.
    textarea.style.border = 'none';
    textarea.style.outline = 'none';
    textarea.style.boxShadow = 'none';

    // Avoid flash of white box if rendered for any reason.
    textarea.style.background = 'transparent';
    document.querySelector("body").appendChild(textarea);
    console.log("The textarea now exists :)");
    existsTextarea = document.getElementById(id);
  } else {
    console.log("The textarea already exists :3")
  }

  existsTextarea.value = text;
  existsTextarea.select();

  try {
    var status = document.execCommand('copy');
    if (!status) {
      console.error("Cannot copy text");
    } else {
      console.log("The text is now on the clipboard");
      obj.innerHTML = "Copied!";
      setTimeout(function() { resetButtonText(obj) }, 5000);
    }
  } catch (err) {
    console.log('Unable to copy.');
  }
}

function resetButtonText(obj) {
  obj.innerHTML = "Copy text";
}