Please wait for 15 seconds...

Friday 11 July 2014



This tutorial is sequel of Copy to Clipboard Using Javascript Day 1. Till now I have shown you how to create basic setup for copy to clipboard, which is less than 5 lines of javascript code. In this tutorial I will explain, how to customise Zeroclipboard for your project and apply them to multiple targets.




Customise

By default it will copy the value from data-clipboard-text attribute. But you can change it and can assign new data to clipboard. Suppose you want to copy innerHTML data from a div. Even you can copy HTML data with their tags.

Download this library folder and unzip in your project directory. Create HTML file copy-to-clipboard-using-javascript-day-2.html and copy n paste below code in it.

HTML

<!DOCTYPE html>
<html>
<head>
<title>Copy to Clipboard Using Javascript Day 2</title>
</head>
<body>
<div class="main">
<div>
<h2>Customise (Copy text from given target instead of default data-clipboard-text attribude)</h2>
</div>
<div>
<div data-text="Copied from div data-text attribute" id="copy_me1" class="copy_me"><p>Click me</p></div>
<div class="breaker"></div>
</div>
<div>
<textarea class="text_container" placeholder="Paste here..."></textarea>
</div>
</div>
</body>
</html>

CSS

<style type="text/css">
.main{
width:600px;
position:absolute;
left:50%;
margin-left:-300px;
/*top:20%;*/
}
.copy_me{
border:2px black dashed;
padding:5px 10px 5px 10px;
float:left;
cursor:pointer;
margin-right:3px;
margin-bottom:3px;
}
.breaker{
clear:both;
}
.text_container{
padding:10px;
font-size:15pt;
border:2px red solid;
margin-top:15px;
width:500px;
height:150px;
}
</style>

Javascript

<script type="text/javascript" src="js/jquery.min1.11.1.js"></script>
<script type="text/javascript" src="js/ZeroClipboard.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var copy_btn1 = $('#copy_me1');
var client1 = new ZeroClipboard(copy_btn1);
client1.on("copy", function(event) {
client1.setText($(event.target).data('text'));
});
client1.on("aftercopy", function(e) {
alert('Copied to clipboard');
});
});
</script>

Copy above code and replace with previous javascript code. Reload the page and click on copy button and paste in big text box.

Now let’s try to copy some HTML data with their tags. Copy below HTML code and replace with previous HTML codes in <body></body>. Also replace javascript code in <script></script>

HTML

<div class="main">
<div>
<h2>Customise (Copy HTML data)</h2>
</div>
<div>
<div id="copy_me2" class="copy_me"><p>Click me</p></div>
<div class="breaker"></div>
</div>
<div>
<textarea class="text_container" placeholder="Paste here..."></textarea>
</div>
</div>

Javascript

$(document).ready(function(){
var copy_btn2 = $('#copy_me2');
var client2 = new ZeroClipboard(copy_btn2);
client2.on("copy", function(event) {
client2.setText($(event.target).html());
});
client2.on("aftercopy", function(e) {
alert('Copied to clipboard');
});
});

Reload page in browser, click on the button and paste into big text box.

Apply to multiple

Till now you have learned how to copy text and HTML data to clipboard, now you will see how to apply this effect to more than one target.

Copy below code and replace with older codes. Do not replace CSS. They are static.

HTML

<div class="main">
<div>
<h2>Apply to Multiple</h2>
</div>
<div>
<div class="copy_me copy_me1">Click button 1</div>
<div class="copy_me copy_me1">Click button 2</div>
<div class="copy_me copy_me1">Click button 3</div>
<div class="copy_me copy_me1">Click button 4</div>
<div class="copy_me copy_me1">Click button 5</div>
<div class="copy_me copy_me1">Click button 6</div>
<div class="breaker"></div>
</div>
<div>
<textarea class="text_container" placeholder="Paste here..."></textarea>
</div>
</div>

Javascript

$(document).ready(function(){
var copy_btn3 = $('.copy_me1');
var client3 = new ZeroClipboard(copy_btn3);
client3.on("copy", function(event) {
client3.setText($(event.target).html());
});
client3.on("aftercopy", function(e) {
alert('Copied to clipboard');
});
});

Open copy_to_clipboard_multi.html in your browser. Now you can see multiple clickable points. Try them all and enjoy coding.

Posted by Atul

0 comments:

Post a Comment

Techsirius on Facebook