Welcome to WebmasterWorld Guest from 18.207.134.98

Forum Moderators: open

Message Too Old, No Replies

Need Urgent Help to Modify a Copy-to-Clipboard Script

     
6:39 pm on Apr 27, 2009 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 21, 2008
posts:139
votes: 1


I have a coupon Web site which presents hundreds of coupon codes per page. I want people to be able to copy a code to their clipboard by simply clicking on it. I can do this with the code below.

The divs with the class "multiple" are clickable. When clicked, the text they contain is copied to the user's clipboard.

Can anyone tell me, please, how I can incorporate window.open() so that, when a div is clicked, not only is the code copied to the user's clipboard but the site to which the code belongs is opened in a new window?

For example, imagine that on my page I present one code for eBay and another for Amazon. When a user clicks on, say, the Amazon code, I want the Amazon code to be copied to the user's clipboard and Amazon.com to be opened in a new window.

I have tried adding window.open() as an onclick event. However, I only managed to get it to work with one div, not multiple.

Any suggestions will be appreciated. I've been stuck on this since yesterday.

####################################

<html>
<head>

<style type="text/css">
body { font-family:arial,sans-serif; font-size:9pt; }

div.multiple {
float: left;
background-color: white;
width:200px; height:200px;
border:1px solid #ccc;
margin:5px;
cursor: pointer;
font-size: 14pt;
}

div.multiple.hover {
background-color: #ddd;
}
</style>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ZeroClipboard.js"></script>

<script language="JavaScript">
var clip = null;

function init() {
// setup single ZeroClipboard object for all our elements
clip = new ZeroClipboard.Client();
clip.setHandCursor( true );

// assign a common mouseover function for all elements using jQuery
$('div.multiple').mouseover( function() {
// set the clip text to our innerHTML
clip.setText( this.innerHTML );

// reposition the movie over our element
// or create it if this is the first time
if (clip.div) {
clip.receiveEvent('mouseout', null);
clip.reposition(this);
}
else clip.glue(this);

// gotta force these events due to the Flash movie
// moving all around. This insures the CSS effects
// are properly updated.
clip.receiveEvent('mouseover', null);
} );
}
</script>


</head>

<body onLoad="init()">

<div class="multiple">CODE</div>
<div class="multiple">CODE</div>
<div class="multiple">CODE</div>
<div class="multiple">CODE</div>

</body>

</html>

1:36 pm on Apr 28, 2009 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 21, 2008
posts:139
votes: 1


I have been stuck on this for over a week! Any suggestions will be appreciated very much.

Let me explain my problem more clearly.

I have a Web site which presents coupon codes. I want people to be able to copy the codes with a single click in a cross browser way. I can do this with the code below.

The divs with the class "code" are clickable. When clicked, the code that they contain is copied to the clipboard.

That all works fine. Here's my problem.

When a visitor copies a code, I want the online store for which the code belongs to be opened in a new window. For example, if someone copies a code for Amazon, I want Amazon.com to be opened in a new window.

The code below opens the same URL for every code. How can I change it so that a different URL is opened for each code?

#################################

<html>
<head>

<style type="text/css">

body {
`font-family:arial;
font-size:9pt;
}

div.code {
background-color: white;
width:200px;
border:1px solid #ccc;
margin:5px;
cursor:pointer;
font-size:14pt;
color:#0000ff;
}

</style>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ZeroClipboard.js"></script>

<script language="JavaScript">

var clip = null;

function init() {
// Set up a single ZeroClipboard object for all elements
clip = new ZeroClipboard.Client();
clip.setHandCursor( true );

// Using jQuery, assign a common mouseover function for all elements
$('div.code').mouseover( function() {
// Set the clip text to our innerHTML
clip.setText( this.innerHTML );

// Reposition the Flash movie over element,
// or create it if this is the first time
if (clip.div) {
clip.receiveEvent('mouseout', null);
clip.reposition(this);
}
else clip.glue(this);

// Must force these events due to the Flash movie
// moving all over. This ensures that the CSS
// effects are properly updated.
clip.receiveEvent('mouseover', null);
} );

// Add an event handler which opens a new window after text is copied
clip.addEventListener('complete', function(client, text) {
window.open('http://www.google.com','','width=400,height=200');
} );

}

</script>

</head>

<body onLoad="init()">

<div class="code">code1</div>
<div class="code">code2</div>
<div class="code">code3</div>
<div class="code">code4</div>

</body>

</html>

3:17 pm on Apr 28, 2009 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member whoisgregg is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Dec 9, 2003
posts:3416
votes: 0


Hi Tehuti,

I'm not familiar with the clipboard library that you are using, so some of this code may not work as I expect. It will hopefully set you on the right path however. :)

The first thing you'll need to do is include somewhere in the code which URL each code should open. If you want this to be accessible to users with javascript disabled, you could mark it up in the HTML:

<div class="code"><a href="http://www1.example.com">code1</a></div> 
<div class="code"><a href="http://www2.example.com">code2</a></div>
...etc...

Then, make two modifications to your existing code. First, attach the event to the a tags directly:

$('div.code a').mouseover( function() { 

Second, pass the href value to the complete function:

this_href = this.href;
clip.addEventListener('complete', function(client, text, this_href) {
window.open(this_href,'','width=400,height=200');
} );

If that doesn't work, please post back what the errors are so we can try to help. :)

5:42 pm on Apr 28, 2009 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 21, 2008
posts:139
votes: 1


Thank you very much, Whoisgregg!

Your suggestion nearly worked. It's the closest of any of the suggestions provided across three different forums.

When clicked, the code is copied, and a new window is opened. However, the new window says:

"File Not Found

The file /C:/xampp/htdocs/zeroclipboard/undefined cannot be found. Please check the location and try again."

Also, sometimes, if the coupon codes are of varied lengths, a new window is not opened, nor is the code copied. The script just acts as a normal hyperlink and directs the visitor to the site.

I think that the following is the problem:

<div class="code"><a href="http://www.example.com">code1</a></div>
<div class="code"><a href="http://www.example.com">code2</a></div>

Is there another way of assigning the URLs?

I appreciate your help very much.

1:55 am on Apr 30, 2009 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 21, 2008
posts:139
votes: 1


So, I'm assuming that there's no other way.
2:35 pm on Apr 30, 2009 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member whoisgregg is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Dec 9, 2003
posts:3416
votes: 0


There's almost always a way. :) I was ill yesterday so didn't have the opportunity to respond.

I don't know why the length of the coupon code would have any effect on the behavior... As far as the undefined error, what that means is that the this_href value is not being passed correctly to the eventListener function.

I went ahead and found all the relevant libraries and setup a test page then realized my mistake. I missed the matching braces and thought the 'complete' addEventListener was inside of the .mouseover loop. Since they are separate, we have to store away the href inside of the clip object. Here's the new first few lines of the .mouseover loop:

$('div.code a').mouseover( function() { 
// Set the clip text to our innerHTML
clip.setText( this.innerHTML );
// Store the href in a variable inside the object
clip.this_href = this.href;

And here's the new 'complete' event function:

clip.addEventListener('complete', function(client, text) { 
window.open(clip.this_href,'','width=400,height=200');
} );

It seemed to work, but I didn't do any kind of cross-browser testing or anything like that. Please post back if you run into more trouble and we'll try to help. :)

11:51 pm on Apr 30, 2009 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 21, 2008
posts:139
votes: 1


Whoisgregg, I want to thank you very much for your assistance. I appreciate your help very much.

Your solution worked beautifully! However, there was still the problem caused by the differing lengths of the codes. I have fixed that problem, and I just wanted to put the final script past you to see what you think.

In your experience, is it safe to use?

The Problem

As I understand it, this library works on the basis of a transparent Flash movie which is placed over a designated element. In our case, the element is an anchor (<a>). The Flash movie is generated on mouseover. The same Flash movie is used for all of the elements on the page.

The problem is, the width of the Flash movie is determined by the anchor text/coupon code. If a user begins by hovering over a short code, the generated Flash movie will be short and will therefore not fully span the other codes.

The Solution

What I done was get rid of the anchor elements and place the Flash movie over the divs. The divs contain the coupon codes and are all the same length. As such, the generated Flash movie will always completely cover all of the coupon codes.

But, then, what about the URLs needed to open the new windows? I assigned them as IDs to each div!

Might that cause any problems?

Below's the code. Please tell me what you think.

<html>
<head>

<style type="text/css">

.code {
background-color: #fff;
width: 200px;
border: 1px solid #ccc;
margin: 5px;
font-size: 14pt;
color: #0000ff;
}

</style>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ZeroClipboard.js"></script>

<script language="JavaScript">

var clip = null;

function init() {
// Set up a single ZeroClipboard object for all elements
clip = new ZeroClipboard.Client();
clip.setHandCursor( true );

// Using jQuery, assign a common mouseover function for all elements
$('div.code').mouseover( function() {
// Set the clip text to our innerHTML
clip.setText( this.innerHTML );
// Store the href in a variable inside the object
clip.this_href = this.id;

// reposition the movie over our element
// or create it if this is the first time
if (clip.div) {
clip.receiveEvent('mouseout', null);
clip.reposition(this);
}
else clip.glue(this);

// Must force these events due to the Flash movie
// moving all over. This ensures that the CSS
// effects are properly updated.
clip.receiveEvent('mouseover', null);
} );

// Add an event handler which opens a new window after text is copied
clip.addEventListener('complete', function(client, text) {
window.open(clip.this_href,'','width=400,height=200');
} );

}

</script>

</head>

<body onLoad="init()">

<div class="code" id="http://www.google.com">CODE1</div>
<div class="code" id="http://www.ask.com">CODE2222</div>
<div class="code" id="http://www.yahoo.com">CODE3333333</div>
<div class="code" id="http://www.aol.com">CODE44444444444</div>

</body>

</html>

6:47 pm on May 3, 2009 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 21, 2008
posts:139
votes: 1


I no longer need help with this matter, guys. Thank you, Whoisgregg, for your help.

I discovered that putting the URLs in the ID is a very bad idea. CSS doesn't allow values with full points (.), question marks (?), or equals (=) signs.

Here's the final code that I arrived at:

<html>
<head>

<style type="text/css">

a.code {
display: block;
padding: 1px 0 1px 2px;
width: 200px;
border: 1px solid #ccc;
text-decoration: none;
font-weight: bold;
}

</style>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ZeroClipboard.js"></script>

<script language="JavaScript">

var clip = null;

function init() {
// Set up a single ZeroClipboard object for all elements
clip = new ZeroClipboard.Client();
clip.setHandCursor( true );

// Using jQuery, assign a common mouseover function for all elements
$('a.code').mouseover( function() {
// Set the clip text to our innerHTML
clip.setText( this.innerHTML );
// Store the href in a variable inside the object
clip.this_href = this.href;

// Reposition the Flash movie over element,
// or create it if this is the first time
if (clip.div) {
clip.receiveEvent('mouseout', null);
clip.reposition(this);
}
else clip.glue(this);

// Must force these events due to the Flash movie
// moving all over. This ensures that the CSS
// effects are properly updated.
clip.receiveEvent('mouseover', null);
} );

// Add an event handler which opens a new window after text is copied
clip.addEventListener('complete', function(client, text) {
window.open(clip.this_href,'','width=400,height=200');
} );

}

</script>

</head>

<body onLoad="init()">

<a class="code" href="http://www.google.com">CODE1</a><br /><br />
<a class="code" href="http://www.yahoo.com">CODE222222</a><br /><br />
<a class="code" href="http://www.youtube.com">CODE333333333</a><br /><br />
<a class="code" href="http://www.ask.com">CODE4444444444444</a>

</body>

</html>

3:40 pm on May 4, 2009 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member whoisgregg is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Dec 9, 2003
posts:3416
votes: 0


I'm glad you got it sorted out Tehuti. :)