zeroclipboard 没有将 flash 按钮完全定位在 div 的顶部答案

【问题标题】：zeroclipboard is not positioning the flash button exactly on top of the divzeroclipboard 没有将 flash 按钮完全定位在 div 的顶部
【发布时间】：2014-11-11 13:55:01
【问题描述】：

有趣的是，这工作了一段时间后突然停止了，AFAIK 没有任何变化。可能是浏览器缓存的事情。无论如何，我的 zeroclipboard 代码：

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' );   
    }

});

还有我的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>

一切正常，但 zeroclipboard 在胶水顶部创建的隐形闪光按钮（this）； div 放置在它应该在的位置以北约 25px 处。有什么想法吗？

【问题讨论】：

标签： javascript html positioning zeroclipboard

【解决方案1】：

这里也一样，swf 被某个地方的填充物压低了，所以过了一会儿我就破解了它。在 ZeroClipboard.js 中改变坐标如下：

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

【讨论】：

【解决方案2】：

解决办法：

看完文档或者其他脚本后再放代码！

在您的页面中，可以包含在页面加载期间减小其大小的元素，例如手风琴或可扩展菜单。

swf中嵌入了一个值为top，但是页面加载结束，其他元素都改变了位置。你的闪光灯应该在所有事件之后考虑它

代码：

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

【讨论】：

【解决方案3】：

我遇到了类似的问题。我实际上最终做的（振作起来）是用 javascript 移动 .swf。它越脏越好，我并不骄傲，但这个问题让我到了理智的边缘。

如果有人有非黑客解决方案，我会全力以赴。

【讨论】：

【解决方案4】：

值得一提，因为它没有在任何其他答案中明确指出：检查以确保您没有任何可能影响定位的 CSS 规则（例如，使用 div 元素选择器）（例如，通过 padding 或 margin) 的 swf 对象所在的 div。

【讨论】：

【解决方案5】：

有点骇人听闻，但对我有用。基本上使用计时器和延迟来确保页面上的所有内容都已“稳定”，然后手动将 flash 元素移动到与按钮相同的绝对位置。需要 JQuery。

在 ZeroClipboard.js 文件中，找到创建 flash div 的行：

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

并添加这一行：

this.div.id = 'zeroclip_flash';

现在包含 flash 元素的 div 可以通过 id 来操作。

在所有其他 ZeroClipboard 启动内容之后，添加以下行：

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

其中 'clip' 是粘合目标元素的 ID。

就像我说的，这是一个 hack，但使用 Chrome 似乎没有其他方法对我有用。

【讨论】：

只有在页面上只有一个元素时这才有效吗？