Search code examples
javascripthtmlpositioningzeroclipboard

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?


Solution

  • 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
            };