CODEWITHSUNDEEP
javascripthtmlflashclasszeroclipboard
Aero
Aero

Reputation: 317

Zeroclipboard, triggered by any element with class="copy"

I've looked through this site along with many others and I can't see the answer anywhere.

I currently have a site with multiple buttons and a preview pane. The text shown in the preview pane differs depending on the button that the user is currently hovering over.

<body>
<div="preview_pane"> <!--ALL TEXT IS SHOWN HERE --> </div>

<div id="button_group">
   <div class="copy_me" id="stock1"></div> <!--THIS SHOWS STOCK TEXT-->
   <div class="copy_me" id="stock2"></div> <!--COMPLETELY DIFFERENT TEXT-->
   <div class="copy_me" id="stock3"></div> <!--YET SOME OTHER DIFFERENT TEXT-->
   <div class="copy_me" id="stock4"></div> <!--OTHER COMPLETELY DIFFERENT TEXT-->
</div>

</body>

What I want to do is have zeroclipboard create the flash overlay on any button with the class copy_me. All of these buttons need to copy the text shown in the preview pane.

This way when the user hovers over the button the text in the preview pane will change and then when they click, the text in the preview pane will be copied to the users clipboard.

I can't manually add the script to every button as there will be over 50 stock text buttons.

I have no experience in flash or javascript (only dabbled in jQuery) so this is something completely new for me.

Any help will be greatly appreciated.

Upvotes: 0

Views: 1315

Answers (3)

user8942
user8942

Reputation: 141

answered a similar question at https://stackoverflow.com/a/26200988/3471658

Try using http://www.steamdev.com/zclip/ it allows you direct access to jquery and you can use your own logic in the return statement.

include jquery.zclip.js download and save ZeroClipboard.swf

Here is a snippet:

$(".class-to-copy").zclip({
    path: "assets/js/ZeroClipboard.swf",
    copy: function(){
        return $(this).attr("data-attribute-with-text-to-copy");
    }
});

Make sure you change the path of the swf.

Upvotes: 1

Rimian
Rimian

Reputation: 38418

You mentioned jQuery. This should make things easier for you:

var client = new ZeroClipboard($('.copy_me'));

See: https://github.com/zeroclipboard/zeroclipboard/blob/master/docs/instructions.md

Also see: http://jsfiddle.net/rimian/45Nnv/

Upvotes: 0

Ryan Lynch
Ryan Lynch

Reputation: 7776

I looked at the api docs for zeroclipboard right quick, and I you want to use the glue method, and pass an array of dom nodes. In this case, you want all the nodes with the class name "copy_me", so:

var clip = new ZeroClipboard();
clip.glue(document.getElementsByClassName('copy_me'));

Upvotes: 0

Related Questions