Zeroclipboard multiple elements

Question

Hi guys, I'm having troubles to create multiple unique code snippets with Zeroclipboard implementation on them, with the option to lunch a popup window after that code is clicked.

basicly I have multiple < a class="xxx" href="popup.url.php" ><span >FRSDE3RD</a> tags. When a user clicks on these codes, I want to copy to clipboard the code inside tags and fire a popup window with the url inside href.

since I have multiple elements on the site I tried a jquery solution posted here on the site, but it didn't worked for me.

here is the head script function written.

  $(document).ready(function(){


ZeroClipboard.setMoviePath( 'path/to/swf/ZeroClipboard.swf' );
   // 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
   $('a.xxx').mouseover( function() {
    // set the clip text to our innerHTML
    var url = $(this).attr("href");
    var code = $(this).children('span').html();
    clip.setText( $(this).children('span').html() );//this.innerHTML );

clip.glue(this);
clip.addEventListener('onMouseDown', function(){
  clip.reposition(this);
  clip.setText( code );
});

clip.addEventListener('onComplete', function(){ 
  clip.reposition(this);
  popUp(url);
}); 


  });
  });

function popUp(URL) {
 day = new Date();
 id = day.getTime();
 eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=1,scrollbars=1,location=1,statusbar=1,menubar=1,resizable=1,width=1024,height=768,left = 328,top = 141');");
}

I succeed on generating the copy to clipboard functionality, but if I use either onMouseUp, onComplete events to trigger popup function, it either fire like 4-5 popups or doesn't fire at all.

please help me out.

P.S. I tried to adapt the solution from http://stackoverflow.com/questions/890444/how-to-load-an-ajax-response-into-clipboard-using-jquery-and-zeroclipboard instead of ajax call just copy to clipboard and on complete to lunch a popup ... as I said didn't worked for me.

what else I figured it out while having flashblocker enabled is that every time I rollover a CODE tag a new flash is being created on the same spot so this might be an explanation why I'm having 3-4 popup when I click it. If I rollover more, more popups come. Is there a way to stop the flash from creating on same spot or destroy on rollout ... ?

Answer 1

after more research I got to my solution to this problem:

   $("a.xxx").each(function() {
//Create a new clipboard client
var clip = new ZeroClipboard.Client();
clip.setHandCursor( true );

//Glue the clipboard client to the last td in each row
clip.glue(this);

var url = $(this).attr("href");
//Grab the text from the parent row of the icon
var code = $(this).children('span').html();    
clip.setText(code);

//Add a complete event to let the user know the text was copied
clip.addEventListener('complete', function(client, text) {
 //alert("Copied text to clipboard:\n" + text);
 popUp(url);
});

});

this is the solution if anyone else will get stuck on this problem.

Answer 2

Thanks! worked for me :-)