Zeroclipboard не позиционирует кнопку вспышки точно на вершине div

Забавно, это сработало какое-то время отлично и внезапно прекратилось, с 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 создает поверх клея (это); div находится примерно в 25px к северу от того места, где он должен быть. Есть идеи?

5 ответов

Решение

То же самое и здесь, 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
        };

Решение:

Поставьте код после прочтения документа или других скриптов!

На вашей странице могут быть элементы, уменьшающие его размер при загрузке страницы, такие как аккордеон или расширяемое меню, например.

В SWF встроено значение для верха, но в конце загрузки страницы другие элементы меняются позицией. Ваша вспышка должна учитывать это после всех событий

Код:

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

Стоит упомянуть, поскольку он не был явно вызван ни в одном из других ответов: проверьте, чтобы убедиться, что у вас нет каких-либо правил CSS (например, с помощью селектора элемента div), которые могут влиять на позиционирование (например, с помощью заполнения или margin) элемента div, в котором находится объект swf.

У меня была похожая проблема. То, что я фактически закончил делать (готовьтесь), было переместить.swf с javascript. Это настолько грязно, насколько это возможно, и я не горжусь, но эта проблема привела меня к краю здравомыслия.

Если у кого-то есть решение не для взлома, я весь в ушах.

Вроде хак, но у меня работает. В основном, используя таймер и задержку, чтобы убедиться, что все на странице "установилось", затем вручную переместите элемент flash в ту же абсолютную позицию, что и кнопка. Требуется JQuery.

В файле ZeroClipboard.js найдите строку, в которой создается flash div:

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

И добавьте эту строку:

this.div.id = 'zeroclip_flash';

Теперь div, содержащий элемент flash, может управляться id.

После всего прочего, посвященного инициации ZeroClipboard, добавьте эту строку:

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

Где "клип" - это идентификатор целевого элемента клея.

Как я уже сказал, это взлом, но больше ничего не работает для меня, используя Chrome.

Другие вопросы по тегам