Timer 00:00:00 на элементе display:absolute
Есть элемент на странице. У элемента есть стиль position (не важно, absolute или relative).
Есть функция (JS):
Везде работает нормально, таймер обновляется, кроме Chrome. В хроме таймер обновляется только в момент ресайза окна (или перерисовки окна). Самое удивительное то - что если position у элемента #waiting_time убрать position - работает как надо.
Чё делать?
Есть функция (JS):
Код:
function f() {
var secsLeft = CONFIG.waiting_time++;
var days = Math.floor( secsLeft / 86400 );
var hrs = Math.floor( secsLeft / 3600 ) % 24;
var mins = Math.floor( secsLeft / 60 ) % 60;
var secs = secsLeft % 60;
if ( hrs < 10 ) hrs = "0" +hrs;
if ( mins < 10 ) mins = "0" + mins;
if ( secs < 10 ) secs = "0" + secs;
timeLeft = hrs + ":" + mins + ":" + secs;
$('#waiting_time').html(timeLeft);
}
var secsLeft = CONFIG.waiting_time++;
var days = Math.floor( secsLeft / 86400 );
var hrs = Math.floor( secsLeft / 3600 ) % 24;
var mins = Math.floor( secsLeft / 60 ) % 60;
var secs = secsLeft % 60;
if ( hrs < 10 ) hrs = "0" +hrs;
if ( mins < 10 ) mins = "0" + mins;
if ( secs < 10 ) secs = "0" + secs;
timeLeft = hrs + ":" + mins + ":" + secs;
$('#waiting_time').html(timeLeft);
}
Везде работает нормально, таймер обновляется, кроме Chrome. В хроме таймер обновляется только в момент ресайза окна (или перерисовки окна). Самое удивительное то - что если position у элемента #waiting_time убрать position - работает как надо.
Чё делать?
Можно попробовать написать вручную, без жеквери, через setInterval или как там функцию зовут. Если всё будет нормально, то понятно в ком косяк..
Ну дык а у меня там и так setInterval обычный. Эта функция f() идёт колбэком для setInterval. Жквэри тут нипричём.
Самый интересный прикол в том, что я попробовал убрать весь этот форматтинг, и сделал просто в этой функции
И оно работает. Содержимое дива динамически меняется. А с форматированием даты - нет. И, ещё раз уточню, лажа эта только в Хроме (тестил ещё в ФФ и Опере - там нормально).
Самый интересный прикол в том, что я попробовал убрать весь этот форматтинг, и сделал просто в этой функции
Код:
var t = new Date().getTime();
$('#waiting_time').html(t);
$('#waiting_time').html(t);
И оно работает. Содержимое дива динамически меняется. А с форматированием даты - нет. И, ещё раз уточню, лажа эта только в Хроме (тестил ещё в ФФ и Опере - там нормально).
Удаляйте построчно и ищите проблемную строку.
Зачем удалять? console.log() если ФБ стоит, ну или alert() после каждой строки..
Цитата: Lone Wolf
Зачем удалять? console.log() если ФБ стоит, ну или alert() после каждой строки..
Самое смешное то, что если сделать console.log и открыть Хромовский файрбаг - то таймер на моей плашке изменяется, а если чвернуть файрбаг - перестаёт. Т.е. тут явно что-то связанное с перерисовкой (как мне кажется).
Какая версия Хрома?
Я подобній баг встерчал в ИЕ7ом. приходилось хакать, дописівая елемнету новый класс, который был пустым.
Я подобній баг встерчал в ИЕ7ом. приходилось хакать, дописівая елемнету новый класс, который был пустым.
Chrome 8.0.552.224
Linux Ubuntu 11.04
Linux Ubuntu 11.04
А под виндой как оно себя ведет?
Аналогичная история. В Firefox - ок, в Хроме - только если "подвигать" див или ресайзнуть окно, или что-то подобное.
А как вы ее вызываете? Как она подгружается?
Как я понял трабла именно при записи в див, а не при пересчете таймера? или нет?
Можешь показать всю верстку страницы.. а не только ЖСкод?
Можешь показать всю верстку страницы.. а не только ЖСкод?
RussianSpy: Сам див подгружается на страницу динамически, при определённых условиях. Подгружаю его используя jquery примерно так:
Содержимое дива - то самое которое исользуется. Только id и класс немного упростил (наименования).
Lone Wolf: Да трабла не столько в записи, сколько именно в обновлении самого элемента.
Код:
var superdiv =
'<div class="popup white_popup white_grad" id="waitdiv">'+
'<div class="popup_inner">'+
'<span class="title">Waiting <em id="waiting_time">00:00</em></span>'+
'<div class="left_link"><a class="return" href="#" id="cancel">cancel</a></div></div>'+
'<div class="plist" style="display:none;"><ul id="list"></ul></div></div>';
$('#mydiv').html(superdiv);
'<div class="popup white_popup white_grad" id="waitdiv">'+
'<div class="popup_inner">'+
'<span class="title">Waiting <em id="waiting_time">00:00</em></span>'+
'<div class="left_link"><a class="return" href="#" id="cancel">cancel</a></div></div>'+
'<div class="plist" style="display:none;"><ul id="list"></ul></div></div>';
$('#mydiv').html(superdiv);
Содержимое дива - то самое которое исользуется. Только id и класс немного упростил (наименования).
Lone Wolf: Да трабла не столько в записи, сколько именно в обновлении самого элемента.
Попробуйте для основного контейнера после $('#mydiv').html(superdiv); выключить и включить отображение через display или visibility
Цитата: RussianSpy
Попробуйте для основного контейнера после $('#mydiv').html(superdiv); выключить и включить отображение через display или visibility
Всмысле для контейнера в котором находится mydiv?
Контейнера где находится все что не отрисовывается. Попробуйте спрятать этот контейнер а потом показать. Быть может дело на самом деле в перерисовке страницы. Но помятуя о том, что все современные браузеры примерно одинаково кривые, то запросто дело может быть в каком-нибудь непрописанном стиле или настройках.
Неа. Не помогло.
Прицепил элемент в body, потом сделал $('body').hide(); $('body').show(); - результата - 0 , таймер так-же обновляется только при передвижении дива или ресайзе окна.
Прицепил элемент в body, потом сделал $('body').hide(); $('body').show(); - результата - 0 , таймер так-же обновляется только при передвижении дива или ресайзе окна.
Ну значит показывайте всю страницу целиком. Лично я больше ничем помочь не могу.
Я в джеквери не очень... Но как я понял, вы управляевый элемент вставляете иннерхтмлом $('#mydiv').html(superdiv);
Насколько мне известно, то innerhtml не перестраивает DOM, а соответственно, Javascript при выполнении function f() упрётся в $('#waiting_time').html(timeLeft); т.к. не найдет waiting_time в ДОМе...
В общем, попробуйте для начала просто разместить на странице
<span class="title">Waiting <em id="waiting_time">00:00</em></span>
(не джс-ом подгружая)
и отладить работу вашего счетчика на статике...
Извините, если неправ...
Насколько мне известно, то innerhtml не перестраивает DOM, а соответственно, Javascript при выполнении function f() упрётся в $('#waiting_time').html(timeLeft); т.к. не найдет waiting_time в ДОМе...
В общем, попробуйте для начала просто разместить на странице
<span class="title">Waiting <em id="waiting_time">00:00</em></span>
(не джс-ом подгружая)
и отладить работу вашего счетчика на статике...
Извините, если неправ...
Цитата: Kesano
Я в джеквери не очень... Но как я понял, вы управляевый элемент вставляете иннерхтмлом $('#mydiv').html(superdiv);
Насколько мне известно, то innerhtml не перестраивает DOM, а соответственно, Javascript при выполнении function f() упрётся в $('#waiting_time').html(timeLeft); т.к. не найдет waiting_time в ДОМе...
В общем, попробуйте для начала просто разместить на странице
<span class="title">Waiting <em id="waiting_time">00:00</em></span>
(не джс-ом подгружая)
и отладить работу вашего счетчика на статике...
Извините, если неправ...
Насколько мне известно, то innerhtml не перестраивает DOM, а соответственно, Javascript при выполнении function f() упрётся в $('#waiting_time').html(timeLeft); т.к. не найдет waiting_time в ДОМе...
В общем, попробуйте для начала просто разместить на странице
<span class="title">Waiting <em id="waiting_time">00:00</em></span>
(не джс-ом подгружая)
и отладить работу вашего счетчика на статике...
Извините, если неправ...
прав ты - прав. но частично.
То что ДОМ не перестраивается - это бага браузера. И ее обходить как-то надо. Например как советовали, прятаньем-показыванием елемента..
Ну хром вообще по багам и странностям идет сразу после IE. Поэтому не удивлюсь если там innerHTML не вызывает перестройку DOM. Хотя с другой стороны вряд ли - все-таки такой косяк является достаточно серьезным и его бы давно исправили.
Цитата: RussianSpy
Ну хром вообще по багам и странностям идет сразу после IE. Поэтому не удивлюсь если там innerHTML не вызывает перестройку DOM. Хотя с другой стороны вряд ли - все-таки такой косяк является достаточно серьезным и его бы давно исправили.
хз-хз..
ну без полного кода старницы, а еще лучше самой страницы в живом виде - сказать что-то сложно
Окей. Скоро тогда запостю сюда урл проекта, заодно и сам проект зацените :)
Про абсолютное позиционирование и таймеры есть чудесная статья: http://chikuyonok.ru/2010/11/optimization-story/
Так, что вещь потенциально плохая
Так, что вещь потенциально плохая
Любопытная статейка. Спасибо.