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.