Zero Clipboard Multi Instance

// October 11th, 2011 // HZBRL

Ever wanted to let your user copy any text from your site to their clipboard without making them select the text and press Ctrl+C?

The Zero Clipboard provides an easy way to copy any text to the clipboard using an invisible Adobe Flash movie, and a JavaScript interface. The “Zero” signifies that the library is invisible and the user interface is left entirely up to you.

This library is fully compatible with Flash Player 10, which requires that the clipboard copy operation be initiated by a user click event inside the Flash movie. This is achieved by automatically floating the invisible movie on top of a DOM element of your choice. Standard mouse events are even propagated out to your DOM element, so you can still have rollover and mouse down effects.

For more info:

http://code.google.com/p/zeroclipboard/

http://code.google.com/p/zeroclipboard/wiki/Instructions

Well I have seen a lot many posts and questions about how to use multiple Zero Clipboard in a single page to copy multiple text. Here is the elixir:

<html>
<head>
        <title>Zero Clipboard Test</title>
        <script type="text/javascript" src="ZeroClipboard.js"></script>
        <script language="JavaScript">
                function toClipboard(me,strMsg) {
                        var clip = new ZeroClipboard.Client();
                        clip.setHandCursor( true );
                        clip.setText(strMsg);
                        clip.addEventListener('complete', function (client, text) {
                                alert("Copy Ok: "+text);
                        });
                        clip.glue(me);
                }
        </script>
		<style>
		.copiable{float:left;}
		</style>
</head>
<body>
        <div class="copiable" onmouseOver="toClipboard(this,'11')">
                <input type="button" value="copy(11)"/>
        </div>
        <div class="copiable" onmouseOver="toClipboard(this,'22')">
                <input type="button" value="copy(22)"/>
        </div>
        <div class="copiable" onmouseOver="toClipboard(this,'33')">
                <input type="button" value="copy(33)"/>
        </div>
</body>
</html>

9 Responses to “Zero Clipboard Multi Instance”

  1. [...] large list, within a user script. To accomplish that, I using a method similar to the one listed on this page, where the ZeroClipboard.Client() element for each row is created when the user mouses over the [...]

  2. This works great, but only with single line value. Any suggestions how to adapt it for multi line value?

    Eg:

    Any help is much appreciated!!

  3. Didnt take my eg :-(
    Anyway I meant
    ” toClipboard(this,’aaa
    bbb
    ccc
    value=”aaa
    bbb
    ccc

    • Kurosh says:

      Great software…thanks for the rdoemmcneation. The free one is nice, but I needed more capacity so I bought the “pro” version and love it Using it constantly to copy and store snippets and paste them when needed.

  4. Elisa Hamdan says:

    Hello. Thanks for this great Article!
    If i don’t want to use button, how can I use tag?
    I tried:
    Copy
    But it didn’t work. Thanks for your help!

  5. My Homepage says:

    … [Trackback]…

    [...] Read More: codelixir.com/zero-clipboard-multi-instance/ [...]…

  6. amar shunar bangla ami tumay balobashi

Leave a Reply