The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Zero Clipboard w/ jQuery

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #27125

    d/l the code:
    view the code:

    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…

    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.

    (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 … ?

    /* 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

    /* 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
    // 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,">“)
    // end Variables

    // The DIVs previously defined are created and placed AFTER the PRE
    .next(“#” + clipCont)

    // Zero Clipboard Options
    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)
    .find(“#” + clipButton)
    // console.log(text);




    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:

    return false;

    Siebird is offline Reply With Quote

    Any help appreciated.

    "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.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘Other’ is closed to new topics and replies.