Grow your CSS skills. Land your dream job.

Zero Clipboard w/ jQuery

  • # December 8, 2009 at 11:18 am

    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’);
    // 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);
    });
    });
    };

    });

    # December 8, 2009 at 11:33 pm

    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.

    # December 10, 2009 at 9:32 pm
    "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)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".