zeroclipboard is not positioning the flash button exactly on top of the div

funny, this worked for a while perfectly and has suddenly stopped, with AFAIK no changes. probably a browser caching thing. Anyway my zeroclipboard code:

var $j = jQuery.noConflict();
ZeroClipboard.setMoviePath( 'ZeroClipboard.swf' );

$j('document').ready(function() 
{   
    var address = $j('#address').html();
    var clip = new ZeroClipboard.Client();  
    clip.setText( address );
    $j('#get_address_button').mouseover(function() {    
        clip.glue(this);
        clip.addEventListener( 'oncomplete', my_complete );     
    }); 

    function my_complete( client ) {
        alert('The Bitcoin Address: '+address+' has been copied to your clipboard' );   
    }

});

And my html:

<div id="address" style="display: none开发者_运维技巧"><?php _e($address) ?></div>
<div style="border:1px solid grey; text-align:center; padding:5px; overflow: auto;">    
    <b><?php echo $message ?></b>
    <img src="<?php _e(WP_PLUGIN_URL) ?>/bitcoin-donations-plugin/images/bitcoin_logo<?php _e($image) ?>.png" alt="image here"/>        
    <div style="position:relative; width:100%;">
        <div style="float:left; width:92px; height:40px; background-image:url(<?php _e(WP_PLUGIN_URL) ?>/bitcoin-donations-plugin/images/button.png);""><a href="http://www.weusecoins.com/">What is<br>Bitcoin?</a></div>
        <div style="float:right; width:92px; height:40px; background-image:url(<?php _e(WP_PLUGIN_URL) ?>/bitcoin-donations-plugin/images/button.png);" id="get_address_button">Get My<br>Bitcoin Address</div>
    </div>
</div>

Everything works fine but the invisible flash button that zeroclipboard creates on top of the glue(this); div is placed about 25px north of where it should be. Any ideas?

Same here, the swf was being pushed down by padding somewhere so after a while I just hacked it. In ZeroClipboard.js change the coordinates as follows:

 getDOMObjectPosition: function(obj, stopObj) {
        // get absolute coordinates for dom element
        var info = {
            left: 0, 
            top: 0, 
            width: obj.width ? obj.width : obj.offsetWidth, 
            height: obj.height ? obj.height : obj.offsetHeight
        };

The solution:

Put the code after reading the document or other scripts!

In your page, can have elements that decreases his size during the loading of the page, such as accordion or expandable menu, for example.

The swf is embedded with a value for the top, but the end of loading of the page, other elements are changed position. Your flash should consider it after all events

The code:

$(document).ready(function() {
       var clip = new ZeroClipboard.Client();
       clip.setText( 'Copy me!' );
       clip.setHandCursor( true );
       clip.glue( 'd_clip_button' );
});

I had a similar problem. What I actually ended up doing (brace yourself), was to move the .swf with javascript. It's as dirty as it gets, and I'm not proud, but this problem has brought me to the edge of sanity here.

If anyone has a non-hacking solution, I'm all ears.

Worth mentioning since it wasn't explicitly called out in any of the other answers: check to make sure you don't have any CSS rules (eg, using a div element selector) that might be affecting the positioning (eg, via padding or margin) of the div that the swf object is in.

Kind of a hack, but works for me. Basically using a timer and delay to make sure everything on the page has "settled", then manually moving the flash element to the same absolute position as the button. Requires JQuery.

In the ZeroClipboard.js file, find the line where the flash div is created:

this.div = document.createElement('div');

And add this line:

this.div.id = 'zeroclip_flash';

Now the div containing the flash element can be manipulated by id.

After all the other ZeroClipboard initiation stuff, add this line:

setTimeout(function() {
    $('#zeroclip_flash').offset( $('#copy').offset() );
}, 500);

Where 'clip' is the ID of the glue target element.

Like I said, it's a hack, but nothing else seems to work for me using Chrome.