Mozilla и document.body.clientWidth

WEB_bobby · №1

При полном разворачивании окна у меня срабатывает JavaScript функция, которая считывает параметр document.body.clientWidth и по этому параметру вычислются некоторые значения CSS. Проблема в том, что Мозила при полном разворачивании окна выдает document.body.clientWidth намного меньший чем IE и Опера.
Но если я ставлю JavaScript функцию на onload и изначально запускаю страницу в уже заранее развернутом окне то document.body.clientWidth Мозилла выдает какой положенно - такой же как и IE и Опера.
Получается такой парадокс: У мозилы document.body.clientWidth изначально развернутого окна отличается от document.body.clientWidth окна которое тоже развернуто, но побывало с момента старта страницы свернутым. Очень странно.Код у меня абсолютно правелен, что подтверждается полностью корректной работой страницы в IE и в Opera при любых разрешениях(CSS параметры исходя от ширины тела вычисляются абсолютно правильно).

Вот максимально упрощенная версия кода. Если потребуется выложу полностью. - Но он не очень легко понятен. Поэтому лучше всего будет если вы поймете причину данной проблемы
с помощью уже изложенной мною информации.С уважением Антон.
____________________________________________________________________________________

Выделить код

Код:

<script>
window.onresize = function()
	{
	    if (document.body.clientWidth <= 1024)
	    {
	        alert('<= 1024');	 
	    }else 
	    { 
            alert(' >1024');	
	        document.getElementById("X5_f").style.width =  document.body.clientWidth - 392; 
        }
    }
		
</script>

____________________________________________________________________________________

Отредактировано WEB_bobby (02-05-2007 11:50:26)

Sergeys · №2

=> Разработка

Lynn · №3

У меня приведённый код работает правильно

WEB_bobby · №4

Lynn пишет

У меня приведённый код работает правильно

Да. Сам по себе такой мини тест-код работает правильно. А вот на моей странице неправильно.Вопрос в этом случае становится еще более интересным.Вообщем смотрите, такая у меня беда...

Document.body.clientWidth одинаков, но.... в разных в функциях JS одно и то же выражение с ним дает разные результаты! Вот неупрощенный JS код с моей страницы.

Выделить код

Код:

<script lanaguage = "JavaScript"> 
  window.onresize = function()
  {
          if (document.body.clientWidth <= 1024)
               document.getElementById("X1_f").style.width = "728px"; 
          else  
          {     
               document.getElementById("X1_f").style.width = document.body.clientWidth - 392;  
                
               alert(document.body.clientWidth);
               alert(document.getElementById("X1_f").style.width);
          }
   } 
        
   function onLoadCheckWidth()
   {
          if (document.body.clientWidth <= 1024)
               document.getElementById("X1_f").style.width = "728px";  
          else 
          { 
               document.getElementById("X1_f").style.width = document.body.clientWidth - 392; 
               
               alert(document.body.clientWidth);
               alert(document.getElementById("X1_f").style.width);
          }
   }
   </script>

А вот теперь выведим этот чисто мазильный глюк(напоминаю что в IE и в Opera все ок. ) на чистую воду.
Когда я разворачиваю окно, то срабатывает window.onresize = function() и посредством alert-ов узнаем что:
document.body.clientWidth = 1246;
document.getElementById("X1_f").style.width = 728;
Но ведь эти резульлтаты противоречивы!

Подставим значение document.body.clientWidth = 1246 в формулу:
document.getElementById("X1_f").style.width = document.body.clientWidth — 392

Получается:
document.getElementById("X1_f").style.width = 1246 — 392 = 854;

Значение document.getElementById("X1_f").style.width = 854; вычисленное вручную не совподает с значением вычисленным функцией JS document.getElementById("X1_f").style.width = 728. При том что исходные данные для формулы дала сама функция JS.

При срабатывании function onLoadCheckWidth() поставленной на onload значение document.getElementById("X1_f").style.width = 854; получается в обоих случах: и в ходе ручного расчета и в ходе расчета функции JS одинаковым.Хотя alert(document.getElementById("X1_f").style.width) выводится совершенно пустым(непонятно кстати почему?), но тем не менее
корекктность выполнения кода видна по визуальному отображению элемента с ID -ом X1_f.
Так что глюк возникает только в функции window.onresize = function().

Еще один отдельный ключевой момент.Я написал отдельный тест-код из которого становится кое-что ясно....

Выделить код

Код:

<html>
<head>
     <title>testWidth</title>
     <script>
          window.onresize = function()
          {
              if (document.body.clientWidth <= 1024)
              {
                   alert(document.body.clientWidth);
              }else
              {
                   document.getElementById("X1_f").style.width =  document.body.clientWidth - 392;            
                   alert(document.body.clientWidth);    
                   alert(document.getElementById("X1_f").style.width);    
              }
          }
     </script>
</head>

<body>

<div id ="X1_f"></div>

</body>
</html>

При запуске этого тест-кода функция window.onresize = function() срабатывает без глюка в вычислении
document.getElementById("X1_f").style.width = document.body.clientWidth — 392;
1280 — 392 = 888. Из работы этого тест-код делаем вывод сама по себе эта функция не глючная,а становится таковой только при ее реализации на моей странице.

Но остается не ясным что может повлиять на моей странице на
вычисление document.getElementById("X1_f").style.width = document.body.clientWidth — 392; ??!!
Но если и влияет что-то, то почему это влияние не сказывается на вычисление
document.getElementById("X1_f").style.width = document.body.clientWidth — 392; в индеетичной по составу функции
function onLoadCheckWidth(), котороя также размещена на мой странице??!

Lynn · №5

Но остается не ясным что может повлиять на моей странице на
вычисление

Наличие правильного DOCTYPE, при котором выражение

Выделить код

Код:

document.getElementById("X1_f").style.width =  document.body.clientWidth - 392;

становиться неверным, т.к. не указана единица измерения. Нужно

Выделить код

Код:

document.getElementById("X1_f").style.width =  document.body.clientWidth - 392 + 'px';

PS. Зачем вообще всё это? Может вам будет достаточно CSS-свойства min-height?

WEB_bobby · №6

Лин, большое человеческое спасибо. - Я уже себе всю голову на этой проблеме сломал.

PS. Зачем вообще всё это? Может вам будет достаточно CSS-свойства min-height?

Если б у меня вычислялось только

Выделить код

Код:

document.getElementById("X1_f").style.width =  document.body.clientWidth - 392;

то с удовольствием бы применил min-height.Но у меня там еще и paddingi боковых блоков вычислются. - их по другому никак не заставишь меняться при смене разрешения.

Добавлено Срд 02 Май 2007 16:17:40 :

Хотя alert(document.getElementById("X1_f").style.width) выводится совершенно пустым(непонятно кстати почему?),

- было бы интересно тоже узнать причину...

WEB_bobby · №7

Конечно этот небольшой вопрос немного отклоняется от данной темы.Но мне кажется вы с легкостью на него ответете. Почему IE при уменьшении разрешения монитора(до 1024*768) выбирает в следующем коде else и соответственно выводит второй аlert со значением 1264? Опера и Мозилла правильно отслеживают - что разрешение уменьшилось.Почему же IE не понимает этого?
Не может быть что для него разрешение существует скажем как 1025*768.
Даже если б это было так то alert( document.body.clientWidth ) вывел бы 1025 а не 1264.
Ничего не понимаю!

window.onresize = function()
{
if (document.body.clientWidth <= 1024)
{
alert('<= 1024');
}else
{
alert(' >1024');
alert( document.body.clientWidth );
}
}

Отредактировано WEB_bobby (02-05-2007 16:44:09)

WEB_bobby · №8

Видимо тоже что такое
какой - нибудь доктайп надо или что там дописать-прописать... Наверняка какая нибудь мелочь, которую просто так вот не заметишь....

И сам по себе этот мини-тест в IE тоже правильно понимает уменьшение размера тела..
Но на странице уже нет.
window.onresize = function()
{
if (document.body.clientWidth <= 1024)
{
alert('<= 1024');
}else
{
alert(' >1024');
alert( document.body.clientWidth );
}
}

- в случае когда надо было дописать 'px' мини-тест с тем же кодом работал корекктно в мозиле, а вот уже поставленный на мою страницу нет. Видимо когда инфы много обрабатывается вылазят все косяки.

web · №9

С той же проблемой столкнулся я, не могу взять точный размер экрана для меню, дела в том что Мозилла дает отличаюший размер. Вот пример:

Выделить код

Код:

<html>
<body OnLoad="getWidth()">
<Script>
function getWidth(){

   alert(document.body.clientWidth);

}
</Script>
</body>
</html>

У меня экран с расширением 1280х1024
Итог теста таковы:

IE: 1260
Opera: 1274
Mozilla: 1280

Во время теста браузеры развернуты. Мозилла выдает расширение экрана со скрулом. Может кто то нашел выход с этой ситуации?

Shutnik · №10

web
а вы чего ожидали?
измените размер ока и обновите страницу

web · №11

shutnik пишет

web
а вы чего ожидали?
измените размер ока и обновите страницу

Этого точно не ожидал :-) Дело в том что окно польностью развернуто. Итого он мне должен дать только размер Без Скрула, Как на ИЕ и в Опере.

Полезная информация

№101-05-2007 20:46:34