Aeroplankton Enthusiasts Society

Intangible Products for an Ephemeral World

Copy to Clipboard using jQuery & zClip

Posted on 2012.12.13 by Aeroplankton Enthusiast

For a recent project I needed to copy the HTML content of a chosen element to the client’s clipboard upon request; making it possible for the user to easily transfer large sections of HTML between applications. Borrowing an awesome little jQuery & Flash (jQuery ZeroClipboard) snippit from SteamDev, I was able to quickly create a toolbar of links which would copy the HTML content of an element with a matching CSS class:

Requirements

The HTML/CSS

Links contained in the #copylinks div will have the zClip function applied to them. Each link should be given an #id matching the .class of it’s associated element/content.

<div id="copylinks"><a id="title"></a>Title |
<a id="desc"></a>Description</div>
<h1 class="title">An Epic Title</h1>
<div class="desc">

HTML content of <strong>sufficient worth</strong> to warrant duplication via the system <em>clipboard</em>

</div>

The JavaScript/jQuery

Include the zClip library then loop through the links in the #copylinks div applying the zclip() function to each by their #id. Upon click the element with matching #div is copied to the client’s clipboard (with notice).

<script type="text/javascript" src="js/jquery.zclip.min.js"></script>
<script type="text/javascript"><br />
	(function($) {<br />
		$('#copylinks a').each(function(){<br />
			objId = $(this).attr('id');<br />
			$('a#'+objId).zclip({<br />
				path: 'js/ZeroClipboard.swf',<br />
				copy: $('.'+objId).html()<br />
			});<br />
		});<br />
	})(jQuery);<br />
</script>
Posted in Scraps & Snippits and tagged , , , , . Permalink.
© 2024 Aeroplankton Enthusiasts Society, All rights reserved.