Zero Clipboard w/ jQuery

[lookslikepat]

---

d/l the code: http://pastebay.com/pastebay.php?dl=75321
view the code: http://pastebay.com/75321

---

Gave up completing this
Found the built in version in Google Syntax Highlighter better since it highlights code too.

This is the "Copy the text" Flash+JavaScript solution found on many sites these days.
I found the learning-curve a bit steep and so it took me some time before everything worked flawlessly. So I thought this could be useful for those of you who need the help…
http://code.google.com/p/zeroclipboard/

As a javascript-noob and jQuery-crasher, I just did a mash-up with jQuery, considering that it should work with the Expanding Code Box from Digging Into WordPress.
http://digwp.com/2009/07/making-an-expanding-code-box/

(hint: I could be wrong on this, but you shouldn’t need the <code> element to measure, it could be done with scrollWidth which stays 0 if the PRE isn’t overflowed and shows the true "width" when it is)

I’m sure this could be vastly improved using WHILE or some other technique, but it works great, tested it for 3 PRE’s at the same time without lag. As soon as I mashed it together with the Expanding Code Box and have Demo up and running I’ll add a link.

This assumes you are using <pre> … example code … </pre> and NOT <pre><code> … fgjfgf … </code></pre> – If you are, adjust the code accordingly, simply add $(" … code ") and .parent() where needed ;)
You must also have an ID equal to ‘box<NUMBER>’ to each PRE, like this: <pre id=’box1′> … </pre> – <pre id=’box2′> … </pre>.
Too lazy to to that with javascript, so if you know how, just do a .length and for … ?

Code:

/* The HTML including what’s created with this script*/

<div class='my-class'>example code</div>

// Include the javascript files

// Created by this script

...

Copy code

…the embed code for flash…

// end Created

Code:

/* The JavaScript */

$(document).ready(function() {

// Define your PRE
preTarget = $(“pre”);
// Only fire if needed
if ( preTarget.length != 0 ) {
// Set absolute path to the flash-file
ZeroClipboard.setMoviePath(‘http://…ZeroClipboard.swf&#8217;);
// Do all the stuff below for each PRE
preTarget.each(function() {

// Stuff to do if the PRE is overflowed
// ex. Expanding Code
// if ( $(this).scrollWidth != 0 ) {
// $(this).hover(function() {
// $(this).addClass(‘overflow’);
// }, function() {
// $(this).removeClass(‘overflow’);
// });
// };
// End stuff

// Setup the variables
var clip = new ZeroClipboard.Client(),
// Get the number of your box
idNo = $(this).attr(“id”).replace(/box/, “”),
// Set the number to the DIVs
clipCont = “d_clip_container_” + idNo + “”,
clipButton = “d_clip_button_” + idNo + “”,
// Creates the elements
clipContDiv = $(“

“).attr({id: clipCont}),
clipButtonDiv = $(“

“).attr({id: clipButton}).append(“Copy code”),
// Grab whats in the PRE – decode the html needed and save as variable
theText = $(this).html()
.replace(/</gim,”<") .replace(/>/gim,">“)
.replace(/&/gim,”&”);
// end Variables

// The DIVs previously defined are created and placed AFTER the PRE
$(this).after(clipContDiv)
.next(“#” + clipCont)
.append(clipButtonDiv);

// Zero Clipboard Options
// http://code.google.com/p/zeroclipboard/wiki/Instructions
clip.setText( theText );
clip.glue( clipButton, clipCont );
// CSS effects adds the classes ‘hover’ and ‘active’ to the DIVs
clip.setCSSEffects( true );
clip.setHandCursor( true );

// Do this after user clicks and the text is copied
clip.addEventListener( ‘complete’, function(client, text) {
$(“#” + clipCont)
.stop()
.fadeOut(500).fadeIn(500)
.fadeOut(500).fadeIn(500)
.find(“#” + clipButton)
.empty()
.html(‘Copied!’);
// console.log(text);
});
});
};

});

[sjohn]

Hi

My friend has a problem with Java. Long time before he had the same problem. As he could not get the perfect solution, he quit it. But again for the same query he has asked for the help. I hope somebody would like to assist my friend.

My friend can’t figure out how to disable clipboard on a specific element using jQuery. He have the context menu disabled on right click, but can’t figure out how to disable the clipboard?

Disable context menu:
JavaScript Code:

$(‘#recentUsers’).bind("contextmenu",function(e){
return false;
});

Siebird is offline Reply With Quote

Any help appreciated.

[lookslikepat]

"sjohn" wrote:

He have the context menu disabled on right click, but can’t figure out how to disable the clipboard?

I’m fairy certain that is impossible to do.
Even if it IS possible (but I’m 99% sure that it isn’t :?: ), anyone could still copy with a simple CTRL+C.

[Author]

Posts