[SOLVED] Help with a Copy-to-Clipboard Script

Fluoresce · April 27, 2009

The Zero Clipboard Library provides an easy way to copy text to the clipboard. It can be used once or multiple times on a 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'); 
}

Can anyone tell me, please, how I can incorporate window.open() in the Zero Clipboard Multiple Element script?

Axeia · April 27, 2009

Can't say I've ever heard of this onComplete even listener.

Does it ever fire? Can't imagine it would.. addEventListener takes 3 parameters.

1) The event

2) What it should do

3) If it should bubble up

Not to mention addEventListeners first parameter isn't prefixed with 'on', for example for an onclick event it would be .addEventListener( 'click', function(e){ alert(e); }, false );

What you're doing looks more like the non-standard/IE way, which would be .attachEvent( 'onClick', function(e){ alert(e); } );

Theres plenty of workaround examples for this out on the web, as well as of course javascript frameworks implementing such a workaround.

Still.. you sure this onComplete event even exists?

Fluoresce · April 27, 2009

Hi, Axaeia.

I really don't know much about Javascript (as you probably guessed). All I know is, 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>

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>

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>

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?

Fluoresce · April 28, 2009

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>

Axeia · April 28, 2009

Mmmh I guess this script checks to see if start and end position of the caret are that of the string to be copied or something and then performs an action. (As firefox wont let javascript the actual clipboard)

I'm guessing you need to change the

         clip.addEventListener('complete', function(client, text) {
            window.open('http://www.google.com','','width=400,height=200');
         } );

bit.

to do something like

clip.addEventListener('complete', function(client, text) {
    switch( text )
    {
      case 'amazon':
        window.open('http://www.amazon.com','','width=400,height=200');
        break;
      default:
        window.open('http://www.google.com','','width=400,height=200');
        break;
    }    
  } );

Might want to throw an alert( text ); in there to see if text is actually something like 'amazon'

Fluoresce · April 28, 2009

Thank you, Axeia, for the attempt. I do appreciate it.

However, I don't think that that'll work.

My coupon codes are dynamically inserted. Switch evaluates a single expression and then compares it to the values in the code to be executed. I don't see how I can make it work.

I need to somehow associate each code with a URL to be opened if the respective code is copied.

Axeia · April 28, 2009

Create an associative array with the coupon code as the key and the link as the value trough PHP, then let the script check if the copied value is a key in the array, if it is.. use the value to open a window.

Isn't simply putting the link directly on the page a lot easier to code AND use though? Not to mention better accessible for those who do not have javascript enabled or simply can't use it.

Fluoresce · April 30, 2009

I'm still completely lost. Any other suggestions?

Sign In

[SOLVED] Help with a Copy-to-Clipboard Script

Recommended Posts

Fluoresce

Link to comment

Share on other sites

Axeia

Link to comment

Share on other sites

Fluoresce

Link to comment

Share on other sites

Fluoresce

Link to comment

Share on other sites

Axeia

Link to comment

Share on other sites

Fluoresce

Link to comment

Share on other sites

Axeia

Link to comment

Share on other sites

Fluoresce

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information