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.

Jason Sperske · Accepted Answer · 2013-12-16T20:45:04.473

4

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.

edited Dec 16 '13 at 20:45

answered Jan 09 '13 at 19:16

Jason Sperske

29,816
8
73
124

Jason, thank you very much for your intuitive help. I have finally got simple links to work on my application. Thank you! However I have run into a small conflict with [bootstrap](http://twitter.github.com/bootstrap/index.html) which may have been the cause of my many previous attempts and not having any results. All my copy to clip board links are in a bootstrap dropdown. I have made a [fiddle](http://jsfiddle.net/Vr4Ky/7/) so you can see the problem. http://jsfiddle.net/Vr4Ky/7/ Do you think you could help me with this please? I can't seem to override the issue. – Joshc Jan 10 '13 at 00:52
This demo is not available anymore. Any idea where I can see that demo working in entirety? – Eric Bishard Dec 16 '13 at 20:35
@EricB I updated the JSFiddle and bumped up the jQuery version (also I embedded the HTML so you could create this answer from scratch without access to the demo) – Jason Sperske Dec 16 '13 at 20:46
Actually this was the one I added: http://jsfiddle.net/Vr4Ky/180/, but here is an updated version of your link: http://jsfiddle.net/Vr4Ky/181/ (with Bootstrap 2.3.2 and updated jQuery) – Jason Sperske Dec 16 '13 at 22:56
1

This helped me and saved me a lot of time. Thank you. – Asbar Mar 24 '15 at 14:30
Im not sure why, but this is not working on my browser. im using chrome and when i click on items, nothing happens. I've tried using the script on my app and does not work either nor in the fiddle. so weird. – gepex Jun 16 '15 at 15:51
@gapex I can't seem to get this to work in y copy of Firefox on Windows 7, I should dust off this answer and see if there is a new way to accomplish this – Jason Sperske Jun 16 '15 at 18:47

score 1 · Answer 2 · edited May 23 '17 at 11:58

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/

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

2 Answers2