jQuery zClip copy to clipboard, for multiple links in bootstrap dropdown?

Question

If this cant be done for cross-browser, then any comments would be much appreciated.

What I am trying to achieve is multiple "copy to clipboard" links on my page like this for example...

<a href="#" data-copy="<?php echo $original[0]; ?>" class="copy">Copy Original Link</a>
<a href="#" data-copy="<?php echo $medium[0]; ?>" class="copy">Copy Medium Link</a>
<a href="#" data-copy="<?php echo $web[0]; ?>" class="copy">Copy Web Link</a>

Just not really having much luck getting anything to work.

I am using zClip, and trying to fire using jQuery onClick and a data attribute, like below.

But just cannot get it to work. See fiddle.

var copyText = 0;

$("a.copy").on('click', function () {

  var copyText = $(this).attr('data-copy');
  return false;

}).each(function () {

  $(this).zclip({

    path: 'http://zeroclipboard.googlecode.com/svn-history/r10/trunk/ZeroClipboard.swf',
    copy: copyText,
    beforeCopy: function () {

    },
    afterCopy: function () {

      alert(copyText + " has been copied!");

    }

  });

});

Please see my new fiddle here with zClip jquery plugin being used.

http://jsfiddle.net/Vr4Ky/5/

Thank in advance for any suggestions.

Answer 1

Here is an updated demo that does what you are trying to do:

Using this (the same) HTML:

<a href="#" data-copy="http://test.one.com/" class="copy">Copy Original Link</a>
<br />
<a href="#" data-copy="http://test.two.com/" class="copy">Copy Medium Link</a>
<br />
<a href="#" data-copy="http://test.three.com/" class="copy">Copy Web Link</a>

This script should work:

$("a.copy").on('click', function (e) {
  e.preventDefault();
}).each(function () {
  $(this).zclip({
    path: 'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
    copy: function() {
      return $(this).data('copy');
    }
  });
});

Here is what I did. First off the alert that you were adding via afterCopy is actually the default, so you don't need to add extra code for that. Also the data-copy attributes should be accessed via jQuery's data function. Finally I put the SWF reference to the same host as the JavaScript (this might not be necessary depending on the security code in the SWF but it seemed necessary to get the jsfiddle to work.

Answer 2

Using Jason Sperske solution, I have found a work around to fix the issue when used inside a bootstrap down.

This is how to get the function to work with bootstrap dropdowns.

$('.btn-group').addClass('open');
$("a.copy").on('click', function (e) {
  e.preventDefault();
}).each(function () {
  $(this).zclip({
    path: 'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
    copy: function() {
      return $(this).data('copy');
    }
  });
});
$('.btn-group').removeClass('open');

Then this css also needs adding, to stop the flash file absolute div positioning outside of the list element.

.dropdown-menu li {
    position: relative;
}

See working fiddle. http://jsfiddle.net/Vr4Ky/27/