Skip to content

Instantly share code, notes, and snippets.

@laphilosophia
Created February 29, 2016 13:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save laphilosophia/d8ac41e13e853871ad4b to your computer and use it in GitHub Desktop.
Save laphilosophia/d8ac41e13e853871ad4b to your computer and use it in GitHub Desktop.
.copySuccess,
.copyError {
width: 300px;
height: 75px;
display: none;
padding: 0;
margin: auto;
position: fixed;
top: 25%;
right: 0;
left: 0;
line-height: 70px;
text-align: center;
color: white;
z-index: 9999;
font-family: 'HelveticaNeueLight', 'Helvetica', Arial, sans-serif;
font-size: 14px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.copySuccess { background-color: #9add3b; }
.copyError { background-color: #dd493b; }
var copyBtn = document.querySelector('.clicktoCopy');
copyBtn.addEventListener('click', function(event) {
var emailLink = document.querySelector('.clicktoCopy');
var range = document.createRange();
range.selectNode(emailLink);
window.getSelection().addRange(range);
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copy command was ' + msg);
$(".copySuccess").fadeIn( 150 ).delay( 1500 ).fadeOut( 200 );
} catch(err) {
console.log('Oops, unable to copy');
$(".copyError").fadeIn( 150 ).delay( 1500 ).fadeOut( 200 );
}
window.getSelection().removeAllRanges();
});
<span class="clickCopy">AIzaSyBkkHxHW91kshha5FMddGQa9I-XivKWpQIAIzaSyBkkHxHW91kshha5FMddGQa9I-XivKWpQIAIzaSyBkkHxHW91kshha5FMddGQa9I-XivKWpQI</span>
<div class="copySuccess">Success!</div>
<div class="copyError">Error!</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment