The Zero Clipboard Library provides an easy way to copy text to the clipboard. It can be used once or multiple times on a single page. I want to add the window.open() function as an onComplete event handler. In other words, when someone clicks the button and copies text to their clipboard, I want a new window to open displaying a Web page of my choice. It's quite easy to incorporate in the single element script: clip.addEventListener( 'onComplete', my_complete ); function my_complete( client, text ) { window.open('URL','windowname','width=400,height=200'); } Code (markup): Can anyone tell me, please, how I can incorporate window.open() in the Zero Clipboard Multiple Element script?
I'll explain myself more clearly. I found a Javascript library online called Zero Clipboard which you can use to copy text to clipboard in a cross browser way. Here's the script in its simplest form, without any event listeners: <html> <body> <script type="text/javascript" src="ZeroClipboard.js"></script> <div id="d_clip_button" style="border:1px solid black; padding:20px;">Copy To Clipboard</div> <script language="JavaScript"> var clip = new ZeroClipboard.Client(); clip.setText( 'Copy me!' ); clip.glue( 'd_clip_button' ); </script> </body> </html> Code (markup): And here's the script with all event listeners: <html> <head> <style type="text/css"> #d_clip_button { text-align:center; border:1px solid black; background-color:#ccc; margin:10px; padding:10px; } #d_clip_button.hover { background-color:#eee; } #d_clip_button.active { background-color:#aaa; } </style> </head> <body> <script type="text/javascript" src="ZeroClipboard.js"></script> Copy to Clipboard: <input type="text" id="clip_text" size="40" value="Copy me!"/><br/><br/> <div id="d_clip_button">Copy To Clipboard</div> <script language="JavaScript"> var clip = new ZeroClipboard.Client(); clip.setText( '' ); // will be set later on mouseDown clip.setHandCursor( true ); clip.setCSSEffects( true ); clip.addEventListener( 'load', function(client) { // alert( "movie is loaded" ); } ); clip.addEventListener( 'complete', function(client, text) { alert("Copied text to clipboard: " + text ); } ); clip.addEventListener( 'mouseOver', function(client) { // alert("mouse over"); } ); clip.addEventListener( 'mouseOut', function(client) { // alert("mouse out"); } ); clip.addEventListener( 'mouseDown', function(client) { // set text to copy here clip.setText( document.getElementById('clip_text').value ); // alert("mouse down"); } ); clip.addEventListener( 'mouseUp', function(client) { // alert("mouse up"); } ); clip.glue( 'd_clip_button' ); </script> </body> </html> Code (markup): I found the onComplete event listener in the latter script. The thing is, I want to use the script multiple times on a single page, which means that I have to use Zero Clipboard's multiple element script: <html> <head> <title>Zero Clipboard Multiple Test</title> <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()"> <h1>Zero Clipboard Multiple Test</h1> <div class="multiple">Hello there</div> <div class="multiple">These are all equally sized DOM elements.</div> <div class="multiple">Click on any of them to copy their text to the clipboard.</div> <div class="multiple">This is all done with a single ZeroClipboard object.</div> <div class="multiple">The only catch is, all the elements must be the same size.</div> <div class="multiple">Bye bye!</div> <div style="clear:both;"></div> </body> </html> Code (markup): My question is, how do I add a window.open() onComplete event listener to this last script which will allow a different URL to be opened for each element? I can add window.open() to the first two scripts but not to the last one. Can anyone help, please?
Hi, I don't know this library, but I would suggest to override their event : clip.addEventListener( 'complete', function(client, text) { alert("Copied text to clipboard: " + text ); } ); I see you used event 'onComplete', which I don't see declared elsewhere. So it could be the issue.
Thanks for pointing that out, lp1051. What I want to know is, how can I incorporate the following into the last script? clip.addEventListener( 'complete', function(client, text) { window.open(); } ); Code (markup):
Thanks, but you've already told me about that script in another thread. It doesn't work with Flash 10.
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> Code (markup):
Just curious why would the need to copy the code if your going to direct them to the site that takes the code, cant you just make the div>code into a href=http://Amazon someSection.php/?code=SomeCode On another note and from experience window.open will cause popup blockers, and reduce your clickthrough rate. I would run with window.location, I know they leave your site but at least you get a genuine cookie dropped when they land at the new URL. BTW where are the URL's stored against the codes, I don't see where your assigning the urls to codes ?
Because they are going to use the code at the site that is opened. I appreciate your suggestion. However, a new window must be opened. That's my question. How do I do that? I want a different site to be opened for each code that is copied. How can I do this?
Hi again, then you need some variable or system that stores the relations coupon->url, so on selection of coupon (unique) open window with specified url. As I said I don't know this library, but as you spent a lot of time with it, you will certainly know if they implemented similar feature. If they don't, you can make your own, e.g. using JSON : var CU = { 'coupon_code' : 'url_to_page', 'coupon_code' : 'url_to_page', .... }; in this example coupon code needs to be without spaces and cannot start with digit, but just to illustrate one possibility. And then you would use it in the event : clip.addEventListener('complete', function(client, text) { var url = CU[text]; window.open(url,'','width=400,height=200'); } ); Hope it helps
Thanks for the reply, lp1051. One rep point for you. The thing is, the coupon codes are selected from a database and echoed in a while loop towards the bottom of the page. Your suggestion will necessitate moving everything to the top of the page, which will create all kinds of other problems. I don't think I can do it. Is there another way, one which will allow me to somehow hide each code's URL on my page, ready to be used in the event?
Hi, it doesn't matter it is in the end of page. You could add to your while loop (in PHP) : <input type="hidden" id="<?php echo $row['coupon_code'] ?>" value="<?php echo $row['page_url'] ?>" /> And then use it in event : clip.addEventListener('complete', function(client, text) { var url = document.getElementById(text).value; window.open(url,'','width=400,height=200'); } ); But there's still limitation, coupon codes needs to be unique...