Copy To Clipboard


Recently we've been making quite a few improvements to the Coveloping tools. One of the features that we have wanted to add for a long time is the copy to clipboard feature, allowing you to simply click a button and add the code from the tool to your clipboard.

Before when using one of Coveloping tools you would have to manually highlight all the code and copy it yourself. This wasn't very user friendly and can become annoying to work with on tools like the CSS minifier where the code you need to copy is condensed into one long line of CSS.

Now with a click of a button you can copy this code straight onto your clipboard.

With any tool that outputs code you will now see a copy code button like below.


CSS Minifier

Colour Shades Generator

Colour Shades Generator This doesn't work the same on all tools.

There is a Colour shades generator tool that allows you to pick a starting colour to return 15 lighter and darker shades of this base colour.

Now with this copy to clipboard functionality you can simply click on the colour shade you want to use and this will be added to your clipboard.

Colour Shades Generator

How This Works

This functionality works with an awesome jQuery plugin that uses a SWF file to provide the copy functionality. For security reasons JavaScript alone can not have access to the clipboard, the only way you can get access to this is with good old flash. This jQuery plugin acts as a wrapper for flash to get access to the clipboard, therefore if you don't have flash turned on this functionality will not work for you.

The jQuery plugin we use is called ZeroClipboard and is an open source project available github.

Zero Clipboard

Here is an example of how you can use it.

<button id="copy-button" title="Click to copy me." data-clipboard-text="Copy Me!">Copy to Clipboard</button>
<script src="ZeroClipboard.js"></script>
<script src="main.js"></script>

This will include the ZeroClipboard.js and a main.js file. In the main.js file is where we will put the code to copy the text.

// main.js
var clip = new ZeroClipboard( document.getElementById("copy-button"), {
moviePath: "/path/to/ZeroClipboard.swf"
} );

clip.on( "load", function(client) {
// alert( "movie is loaded" );

client.on( "complete", function(client, args) {
// `this` is the element that was clicked = "none";
alert("Copied text to clipboard: " + args.text );
} );
} );

It's very flexible and easy to use, we recommend you give it a try on your own websites.

Zero Clipboard

Coveloping Membership

Access to a range of developer tools, get your first month free

Start Your Free Trial

Don't miss out!

Sign up to our newsletter for the latest news from Coveloping

Leave a Reply

Your email address will not be published. Required fields are marked *

Code Copied!