Snippets, Tutorials

Click to copy and open site script

I needed a script that copies a text (in my case, coupon code) onto clipboard and then open the web address associated with the coupon in a new window for my Coupons for Webmasters page. For the clipboard copying, I’m using ZeroClipboard script written by Joseph Huckaby. ZeroClipboard is a free and open source library that provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie, and a JavaScript interface. And opening a new window was easier than I thought, with jQuery and a bit of googling.

HTML Code

<html>
<head>
<title>Zero Clipboard Test</title>
	
<script type="text/javascript" src="ZeroClipboard.js"></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type="text/javascript" src="clipboard.js"></script>

</head>
<body >
<h1>Zero Clipboard Test</h1>

<div class="coupon">
<h3>Hostgator Hosting Coupon</h3>
<div class="desc">20% off all plans for new customers</div>
<div class="expiry">Expiry date: - </div>
<div class="coupon-code" rel="https://eisabainyo.net/view/hostgator">GREEN</div>
<div class="coupon-link">Click to copy</div>
</div>

<div class="coupon">
<h3>Godaddy Domain Name Coupon</h3>
<div class="desc">$7.49 for any .COM domain</div>
<div class="expiry">Expiry date: - </div>
<div class="coupon-code" rel="https://eisabainyo.net/view/godaddy">OYH7</div>
<div class="coupon-link">Click to copy</div>
</div>

<div class="coupon">
<h3>Website Templates</h3>
<div class="desc">5% off any template (no coupon required)</div>
<div class="expiry">Expiry date: 10 June 2010 </div>
<div class="coupon-link"><a href="https://eisabainyo.net/website-templates" target="_blank">Go to site</a></div>
</div>

</body>
</html>

ZeroClipboard Script (download at Google Code)
You’ll need ZeroClipboard.js and ZeroClipboard.swf.

clipboard.js

ZeroClipboard.setMoviePath("http://fullpath.to.your.site/ZeroClipboard.swf");

var clip = null;
var url = '';

function init() {
	clip = new ZeroClipboard.Client();
	clip.setHandCursor( true );
	
	$('.coupon-code').mouseover( function() {
		clip.setText(this.innerHTML);
		if (clip.div) {
			clip.receiveEvent('mouseout', null);
			clip.reposition(this);
		} else {
                        clip.glue(this);
                }
		clip.receiveEvent('mouseover', null);
		url = $(this).attr('rel');
	});
	
	clip.addEventListener('mouseUp', function(client) { 
		window.open(url);
	});
}
	
$(document).ready(function() {
	init();
});

See the code in action at Coupons for Webmasters. RetailMeNot is also using a similar script to achieve the same result.

5 thoughts on “Click to copy and open site script

  1. Hello,can you give me tips on how to do this with word press , I tried many times but it not displayed ??
    thanks in advance :)

  2. Hi Ei:

    I played with this all day long and struggled a bit. Please help.

    I would like the script to copy to clipboard only. I do not want the script to open a new window to the store’s site.

    Currently, I have it set up as follows. The script doesn’t work this way.

    COUPON CODE

    Your script works when I set up as follows:

    The script works when I set up as follows.

    COUPON CODE

    But, this makes it so hard to control CSS hover effects on the COUPON CODE itself, since it is not an anchor link.

    Can you give a reduced version of your code to just perform the copy function?

    Secondly, do you know wheter the ZeroClipboard script supports copying the text of a hyperlink?

    Thanks in advance.

    Tonkin

Comments are closed.

Career Guide for Software Developers