I have integrated copy to clipboard button with the code box. Problem is that I want the button to localized to the right top corner but I am unable to customize it moreover words are going out of the code box tried word-break but no effect. button not working properly please help some. I didn't want overflow: hidden property.
function selectElementContents(el) {
// Copy textarea, pre, div, etc.
if (document.body.createTextRange) {
// Internet Explorer
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.select();
textRange.execCommand("Copy");
}
else if (window.getSelection && document.createRange) {
// Non-Internet Explorer
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 Internet Explorer 4+, Chrome 42+, Firefox 41+, Opera 29+
copy_btn.value = "Copy to Clipboard";
}
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"));.codebox { background-color: #f3f3f6; border-radius: .25rem; padding: 2.25rem 2.25rem 2.25rem 2.5rem; margin: 1.2rem 0 1.2rem; border: 2px solid #d5d5d8; position: relative; }
.codebox:before{ content: ''; position: absolute; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MiA4Ij4KICA8cGF0aCBkPSJNNTIgN2MtMy4yIDAtMy4yLTMtNi41LTMtMy4yIDAtMy4yIDMtNi41IDNzLTMuMy0zLTYuNS0zYy0zLjMgMC0zLjMgMy02LjUgM3MtMy4yLTMtNi41LTNjLTMuMiAwLTMuMiAzLTYuNSAzLTMuMiAwLTMuMi0zLTYuNS0zUzMuMyA3IDAgN3YxaDUyVjd6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI2YzZjNmNiIvPgogIDxwYXRoIGQ9Ik01MiA2Yy0zLjIgMC0zLjItMy02LjUtMy0zLjIgMC0zLjIgMy02LjUgM3MtMy4zLTMtNi41LTNjLTMuMyAwLTMuMyAzLTYuNSAzcy0zLjItMy02LjUtM2MtMy4yIDAtMy4yIDMtNi41IDMtMy4yIDAtMy4yLTMtNi41LTNTMy4zIDYgMCA2IiBmaWxsPSJub25lIiBzdHJva2U9IiNkNWQ1ZDgiIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4K); background-repeat: no-repeat; background-size: cover; top: -7px; left: 20px; width: 52px; height: 8px; }
.codebox p{font-size:16px;margin-left: 29px;margin-bottom: 0;}
.codebox p:before{ content: ''; width: 1.5rem;margin-left: 16px; height: 1.5rem;left: -4px; position: absolute; top: 21px; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNS41IDI1LjQiPgogIDxjaXJjbGUgY3g9IjEyLjgiIGN5PSIxMi43IiByPSIxMiIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNmOWVkNDMiIHN0cm9rZT0iI2Y5ZWQ0MyIgc3Ryb2tlLXdpZHRoPSIxLjIiLz4KICA8cGF0aCBkPSJNOC40IDhWNi40YzAtLjQuNC0uNy44LS43aDguNmMuNCAwIC43LjMuNy43djEyLjFjMCAuNC0uMy43LS43LjdIMTYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjMzQ0NDRjIi8+CiAgPHBhdGggZD0iTTcuOCA3LjNoOC4xYy40IDAgLjcuMy43Ljd2MTEuNmMwIC40LS4zLjctLjcuN0g3LjhjLS40IDAtLjctLjMtLjctLjdWOC4xYy0uMS0uNC4zLS44LjctLjh6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI2Y2OGM1MCIgc3Ryb2tlPSIjZjY4YzUwIiBzdHJva2Utd2lkdGg9Ii41Ii8+CiAgPHBhdGggZD0iTTE1LjIgMTJIOC41TTE1LjIgMTAuMkg4LjVNMTUuMiAxMy44SDguNU0xNS4yIDE1LjhIOC41TTExLjggMTcuNUg4LjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2Y5ZWQ0MyIgc3Ryb2tlLXdpZHRoPSIuOTQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4K); }
<pre id="markup">
<div class="codebox"><p>
Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.Here is your code.
</div>
</pre>