zeroclipboard не позиционира бутона за флаш точно върху div

забавно, това работи за известно време перфектно и внезапно спря, с AFAIK без промени. вероятно нещо с кеширане на браузъра. Както и да е моят код на нулевия клипборд:

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 северно от мястото, където трябва да бъде. Някакви идеи?


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 намерете реда, където е създаден флаш div:

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

И добавете този ред:

this.div.id = 'zeroclip_flash';

Сега div, съдържащ флаш елемента, може да се манипулира от id.

След всички други неща за иницииране на ZeroClipboard, добавете този ред:

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

Където 'clip' е идентификаторът на целевия елемент за лепило.

Както казах, това е хак, но изглежда нищо друго не работи за мен с Chrome.

person Anthony    schedule 14.11.2013
comment
няма ли да работи само ако имате само един елемент на страницата? - person Sagive SEO; 11.12.2013