I'm having trouble creating multiple Zeroclipboard instantiations in my code, with each instantiation launching a popup window after it is invoked.
<a class="xxx" href="popup.url.php" ><span >FRSDE3RD</a>
<a class="xxx" href="popup.url2.php" ><span >FRSDE3RD2</a>
<a class="xxx" href="popup.url3.php" ><span >FRSDE3RD3</a>
$(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.
P.S. I tried to adapt the solution from 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?
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.