ZeroClipboard Issue #264

Delayed loading of ZeroClipboard

HTML

<script src="//rawgithub.com/zeroclipboard/zeroclipboard/v1.2.2/ZeroClipboard.js"></script>
<div id="d_clip_button" onmouseover="move_swf2(this)" class="copy2clipboard"></div>
<br />
<br />
<br />
<div id="d_clip_button2" onmouseover="move_swf2(this)" class="copy2clipboard"></div>
<br />
<br />
<br />
<div id="d_clip_button3" onmouseover="move_swf2(this)" class="copy2clipboard"></div>

CSS

body {
    background-color: black;
    color: white;
}
.copy2clipboard {
    background: url(http://www.lots.raidcentral.net/images/bg_copy2.png) no-repeat !important;
    border: none !important;
    height: 18px !important;
    padding-top: 2px !important;
    position: relative !important;
    text-align: center !important;
    top: 2px !important;
    width: 65px !important;
    display:inline-block;
}
.copy2clipboard.hover {
    background-image: url(http://www.lots.raidcentral.net/images/bg_copy2.png) !important;
    cursor:pointer;
}
.copy2clipboard.active {
    background-image: url(http://www.lots.raidcentral.net/images/bg_copied.png) !important;
}
.copy2clipboard.visited {
    background-color:#00FF00;
}
.copy2clipboard2 {
    background: url(http://www.lots.raidcentral.net/images/bg_copied.png) no-repeat !important;
    border: none !important;
    height: 18px !important;
    padding-top: 2px !important;
    position: relative !important;
    text-align: center !important;
    top: 2px !important;
    width: 65px !important;
    display:inline-block;
}
.copy2clipboard2.hover {
    cursor:pointer;
}

JavaScript

var clip;

function move_swf2(ee) {
    console.log("move_swf2");

    if (!ZeroClipboard.prototype._singleton || ee === window || !ee) {
        return;
    }
    
    console.log("mouseoveri");
    
    // Glue it (which adds a ZeroClipboard-based `mouseover` handler
    clip.glue(ee);
    
    // IMPORTANT!!! Remove the `onmouseover` attribute handler
    ee.onmouseover = null;
    ee.removeAttribute("onmouseover");
    
    // Set the current element to be ZeroClipboard's active element
    clip.setCurrent(ee);
    
    console.log("setfromi");
}


window.onload = function() {
    
    ZeroClipboard.setDefaults({
        moviePath: "//rawgithub.com/zeroclipboard/zeroclipboard/v1.2.2/ZeroClipboard.swf",
        trustedDomains: [window.location.host]
    });

    clip = new ZeroClipboard();

    clip.on("mouseover", function(client, args) {
        console.log("mouse is over movie");        
            
        // NOTE: In most browsers, the cursor UI will not update until you move the mouse
        // off of the element. Since this Fiddle is dynamically adding this styling after
        // the mouse is already over the element, you will likely need to move the mouse
        // off and back on before the cursor style changes. You can, however, verify that
        // the Flash movie has indeed moved in by right-clicking the element (without moving
        // the mouse off) or just left-clicking to copy as expected — IMPORTANT: — ONCE THE
        // FLASH MOVIE HAS LOADED!!!
        
        this.style.cursor = "pointer";
    });

    clip.on("dataRequested", function(client, args) {
        console.log("Setting text: " + this.id);
        client.setText(this.id);
    });
    
    clip.on("complete", function(client, args) {
        console.log("Copied data: " + JSON.stringify(args.text)); 
    });
};