Я разрабатываю динамическое всплывающее окно HTML (div с абсолютным позиционированием), используя jQuery, который автоматически центрируется на экране. Он также может размещать содержимое, которое соответствует или превышает размеры экрана окна.
Идея состоит в том, что наш клиент нажимает ссылку "читать дальше" рядом с нашим списком продуктов, а затем появляется это всплывающее окно и отображается его рекламное письмо. Каждое рекламное письмо также содержит видео, в котором более подробно описывается продукт.
Всплывающее окно будет оставаться в центре экрана, пока оно не будет закрыто, либо нажав кнопку закрытия в окне, либо щелкнув за пределами него. Он остается в центре, регулируя его абсолютное положение в зависимости от того, где пользователь прокручивает и изменяет ли размер окна.
Моя проблема в элементе видео. Во всех других браузерах, кроме Firefox (всех вещей), видео отлично отображается во всплывающем окне, когда пользователь прокручивает документ или изменяет размер видео. Тем не менее, в Firefox, когда пользователь прокручивает / изменяет размеры и всплывающее окно регулирует его абсолютное положение, видео выглядит так, как будто оно расплывается от того места, где оно было изначально, к тому, где оно находится сейчас, или экран видео становится прозрачным.
Я подумал, что, возможно, нужно заставить Firefox перерисовать видеоэкран. Я попробовал несколько разных способов сделать это. Просто заставить элемент исчезнуть и снова появиться быстро, казалось, не сделал работу. Однако, если я быстро скорректировал поля или положение вперед и назад, это, похоже, сработало.
Сначала я собирался пойти с этим решением. Но затем, когда я начал тестировать его в других браузерах, это «покачивание» замедляло работу браузера, особенно я заметил это в Chrome (я еще не тестировал его в других браузерах).
Я думал об ограничении этого исправления Firefox, но поле данных браузера в jQuery устарело в версии 1.3. Я всегда мог сделать javascript самостоятельно, чтобы идентифицировать браузер, но мне было интересно, есть ли лучший способ заставить браузер перерисовывать элемент видео. Или, может быть, я на неправильном пути, и его не нужно перерисовывать.
Я использую FireFox 3.0.1, Chrome 1.0.154.48, Internet Explorer 7 и Safari 3.
Любой ввод приветствуется :) Вот код для функции wiggleVids:
** Обновление: я изменил код так, чтобы внедренные элементы шевелились только тогда, когда изменилось положение всплывающего окна, а не привязывали его к функции прокрутки окна. Это немного ускорило выполнение Chrome, но его пока нет. Это все еще заметное отставание.
** Обновление 2: по предложению Ли я изменил код, чтобы внедренные видео во всплывающем окне сохранялись в массиве. Таким образом, когда эта функция будет выполнена, браузеру не придется снова и снова искать в DOM вложенные объекты. myVids объявляется и очищается глобально, когда всплывающее окно закрывается.
function wiggleVids3() {
if ( myVids.length <= 0 ) {
$('#popup embed').each( function(ctr) { myVids[ctr] = $(this); } );
}
if ( myVids.length > 0 ) {
for( var ctr = 0; ctr < myVids.length; ctr++ ) {
var myObj = myVids[ctr];
var temp = myObj.css("margin-top");
var suffix = temp.substr( temp.length - 2,temp.length );
var currentMargin = ( ( suffix == 'px' ) || ( suffix == 'em' ) ) ? parseInt( temp.substr( 0, temp.length - 2 ) ) : parseInt( temp );
var newMargin = currentMargin + 2;
myObj.css('margin-top', newMargin + 'px');
setTimeout( function(){ myObj.css('margin-top', currentMargin ); }, 1 );
}
}
}