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 размещается примерно на 25 пикселей к северу от того места, где он должен быть. Любые идеи?


javascript html positioning zeroclipboard
person edzillion    schedule 21.04.2011    source источник

Ответы (5)


arrow_upward
3
arrow_downward

То же самое здесь, 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
        };
person Mike K.    schedule 19.01.2013

arrow_upward
2
arrow_downward

Решение:

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

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

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

Код:

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

arrow_upward
1
arrow_downward

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

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

person Nix    schedule 08.09.2011

arrow_upward
1
arrow_downward

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

person Hans    schedule 08.09.2013

arrow_upward
1
arrow_downward

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

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

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

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

this.div.id = 'zeroclip_flash';

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

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

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

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

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

person Anthony    schedule 14.11.2013
comment
Разве это не сработает, только если у вас только один элемент на странице? - person Sagive SEO; 11.12.2013