Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.12.2012, 13:01
Новичок на форуме
Отправить личное сообщение для w1cked Посмотреть профиль Найти все сообщения от w1cked
 
Регистрация: 24.12.2012
Сообщений: 3

Google Chrome переставляет элементы после события onload
Привет!

Хочу разобраться с событиями.

Есть 3 блочных элемента. 2 сверху, 1 под ними.

Я хочу изменить ширину нижнего элемента по ширине 2х верхних.

blank.style.width=triangle_right.offsetLeft-triangle_left.offsetLeft-triangle_left.offsetWidth+"px";


blank - нижний
triangle_left и triangle_right - верхние

Есть браузер Google Chrome, который переставляет triangle_right влево на 200пх после события window.onload.

Библиотеку jQuery использовать не хочу. Потому что это - слишком простая задача.

Вопрос: какое событие возникает, когда браузер завершает переставлять элементы после загрузки страницы?

Других скриптов нет.

Ниже оффтопик/что сделано:
По событию onresize проблемы нет.
В других браузерах проблемы нет.
Добавление задержки в 100мс устраняет проблему на моем компе.
Ответить с цитированием
  #2 (permalink)  
Старый 24.12.2012, 14:40
Новичок на форуме
Отправить личное сообщение для w1cked Посмотреть профиль Найти все сообщения от w1cked
 
Регистрация: 24.12.2012
Сообщений: 3

http://jsfiddle.net/kEauw/4/

На jsfiddle не воспроизводится, т.к. страница большая и проходит больше 100мс до выполнения скрипта.

Пока пытался воспроизвести, нашел источник проблемы.

Как дождаться загрузки шрифтов?
Ответить с цитированием
  #3 (permalink)  
Старый 25.12.2012, 06:34
Новичок на форуме
Отправить личное сообщение для w1cked Посмотреть профиль Найти все сообщения от w1cked
 
Регистрация: 24.12.2012
Сообщений: 3

Проблема в некорректном, с точки зрения учебников, поведении Google Chrome.

Я написал такой код, который воспроизводит проблему.

<html>
<head>
<style>
@font-face {
  font-family: 'Philosopher';
  font-style: normal;
  font-weight: 400;
  src: url([url]http://themes.googleusercontent.com/static/fonts/philosopher/v4/OttjxgcoEsufOGSINYBGLWOb2gHztoQeulij-[/url]
1lvl-8.woff) format('woff');
}
body {
        font-family: Philosopher;
        font-size: 20px;
}
</style>
<script>
window.onload=function(){console.log('onload event -- '+document.getElementById("a").offsetWidth);}
window.setTimeout('console.log("timeout 10 event -- "+document.getElementById("a").offsetWidth)',10);
window.setTimeout('console.log("timeout 100 event -- "+document.getElementById("a").offsetWidth)',100);
</script>
</head>
<body>
<span id="a">qwe qwe qwe qwe</span>
</body>
</html>


Вывод этого скрипта:

onload event -- 186
timeout 10 event -- 186
timeout 100 event -- 159

И нашел другие разговоры о ней тут http://productforums.google.com/foru...me/7VIpByhmU3U

По-прежнему прошу помочь разобраться в том, как правильно написать обработчик события - аналог onload без jQuery и других библиотек.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
window.parent в Google Chrome в файловом протоколе Кора Оливе Events/DOM/Window 0 23.12.2012 21:58
Фон в расширении google chrome sinbad13 Javascript под браузер 1 05.12.2012 10:10
Выполнение проверки после наступления события juggalo Events/DOM/Window 6 06.10.2012 01:37
frames в google chrome sasha.sivakov@mail.ru Общие вопросы Javascript 1 28.02.2012 21:47
Google Chrome Андрей Параничев Opera, Safari и др. 42 02.08.2009 14:23