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”

balaji says:

2023 at

exllent
mezo says:

2023 at

thank you so much,,,this post is helpful….I gonna use the code :)
.-= mezo´s last blog ..walmart:Get the Xbox Arcade Console and Free $50 Gift Card =-.
mansila says:

2023 at

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 :)
Online Promotional Codes says:

2023 at

great information about Click to copy and open site script
Tonkin says:

2023 at

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