x

zClip Version 1.1.1 Released

- Fixed "getDOMObjectPosition" function to allow relative/absolute positioning of parent element Wed Jun 1, 2011

zClip is a lightweight jQuery "copy to clipboard" plugin built using the popular Zero Clipboard library. This plugin uses an invisible Adobe Flash movie that is fully compatible with Flash Player 10 and below.

features

Features

Copy
$("#copy-button").zclip({
    path: "js/ZeroClipboard.swf",
    copy: function(){
	return $(this).prev().val();
	}
});
download

Download

Full
jquery.zclip.js ~16KB
ZeroClipboard
ZeroClipboard.swf ~1KB
usage

Usage

1.) Add jQuery and zClip to your document.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.zclip.js"></script>

2.) Inside of a <script> block, attach zClip to the element which will become your "copy button".

$(document).ready(function(){

    $('a#copy-description').zclip({
        path:'js/ZeroClipboard.swf',
        copy:$('p#description').text()
    });

    // The link with ID "copy-description" will copy
    // the text of the paragraph with ID "description"


    $('a#copy-dynamic').zclip({
        path:'js/ZeroClipboard.swf',
        copy:function(){return $('input#dynamic').val();}
    });

    // The link with ID "copy-dynamic" will copy the current value
    // of a dynamically changing input with the ID "dynamic"

});
Click here to copy the zClip description paragraph

Click here to copy the value of this input:

3.) Supply custom callback functions.

$(document).ready(function(){

    $("a#copy-callbacks").zclip({
        path:'js/ZeroClipboard.swf',
        copy:$('#callback-paragraph').text(),
        beforeCopy:function(){
            $('#callback-paragraph').css('background','yellow');
            $(this).css('color','orange');
        },
        afterCopy:function(){
            $('#callback-paragraph').css('background','green');
            $(this).css('color','purple');
            $(this).next('.check').show();
        }
    });

});

This callback paragraph starts red...

Turns yellow before being copied...

Then turns green after being copied.

The link itself changes color; checkmark on complete.

Click here to see zClip callback functions in action.

4.) Parameters & Defaults

Settings

Variable
Default Value
Available Values
path *"ZeroClipboard.swf""path/to/ZeroClipboard.swf"
copy *nullany string, or any javascript expression or function that returns a string
afterCopynullspecify a function to call after text is copied.

(your afterCopy function will overwrite the default alert box.)
beforeCopynullspecify a function to call before text is copied.
clickAftertruetrue
false
setHandCursortruetrue
false
setCSSEffectstruetrue
false
* required
notes

Notes

1.) Tested compatible in IE 6, IE 7, IE 8, FF 3.6, Chrome 8, Safari 5, Opera 11

2.) For proper CSS effects:

/* zClip is a flash overlay, so it must provide */
/* the target element with "hover" and "active" classes */
/* to simulate native :hover and :active states. */
/* Be sure to write your CSS as follows for best results: */

a:hover, a.hover {...}
a:active, a.active {...}

3.) Show / Hide / Remove zClip

$('a.copy').zclip('show'); // enable zClip on the selected element

$('a.copy').zclip('hide'); // hide zClip on the selected element

$('a.copy').zclip('remove'); // remove zClip from the selected element

4.) For best results, attach zClip to your elements once the page has its final layout. There is a function that automatically repositions each flash overlay on window load and resize, but it may not be 100% reliable in every instance.

5.) Version Notes

Current Release jquery.zclip.1.1.1.zip ~8KB
Previous Versions jquery.zclip.1.0.0.zip ~8KB
jquery.zclip.1.1.0.zip ~8KB
Reported Bugs (report a bug) - $.type() causing errors with jQuery 1.4.2 and below. Fixed - 1.1.0
- Positioning off with "position:relative;" on the parent element. Fixed - 1.1.1
Pending Fixes - $(this) selector not supported in callback functions. Fixed - 1.1.0
bugs

6.) Bugs? Suggestions? Comments? Questions?

The script is 100% free,
but donations are appreciated.