Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.05.2010, 14:18
Аспирант
Отправить личное сообщение для Kein Посмотреть профиль Найти все сообщения от Kein
 
Регистрация: 11.01.2010
Сообщений: 32

Как определить ширину элемента
Пытаюсь получить ширину DOM объектов, которые содержит 2+ DIV'а, первый 308px, другие по 200px
Пытаюсь получить ширину:
alert(this.clientWidth + ' ' + (this['getWidth']?this.getWidth():'')+' -');

Результат:
Chrome: 800
Opera: 708
FF: 783
IE: 714

Причем если смотреть в отладчиках, все браузеры показывают 908 px корректные.
Просчет выполняется после загрузки DOM стили хранятся в HTML файле, так что поздней загрузки быть не может.
Не пойму что делать.

Нужно это для блока:
<div class="scroll_area" id="scroll">
<div class="area" id="area">
<div class="category">
[..]
</div>
</div>
</div>
Где
#scroll {position:realtive; } #area {position:absolute;} и для area вычисляется ширина что бы был корректной длины горизонтальный скролл.
Может я не знаю чего-то и можно все это сделать без JS?

P.S в блок #area походу выполнения будут еще добавляться блоки div.category;
Ответить с цитированием
  #2 (permalink)  
Старый 31.05.2010, 14:21
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Сообщение от Kein
Как определить ширину элемента
offsetWidth
Ответить с цитированием
  #3 (permalink)  
Старый 31.05.2010, 14:27
Аспирант
Отправить личное сообщение для Kein Посмотреть профиль Найти все сообщения от Kein
 
Регистрация: 11.01.2010
Сообщений: 32

Результат аналогичен, во всех браузерах

Upd: что интересно, в последующем функция выдает правильный результат

Последний раз редактировалось Kein, 31.05.2010 в 14:30.
Ответить с цитированием
  #4 (permalink)  
Старый 31.05.2010, 15:57
Аватар для Skipp
.
Отправить личное сообщение для Skipp Посмотреть профиль Найти все сообщения от Skipp
 
Регистрация: 30.03.2010
Сообщений: 1,813

Забавно 308 + (2 * 200) будет 708, а не 908.
Покажи весь код.
__________________
.
Ответить с цитированием
  #5 (permalink)  
Старый 31.05.2010, 16:07
Аспирант
Отправить личное сообщение для Kein Посмотреть профиль Найти все сообщения от Kein
 
Регистрация: 11.01.2010
Сообщений: 32

Весь код приводить не буду, слишком много левых данных:
Это расчет ширины, area jquery объект
area.children().each(function(i){
            //alert(this.offsetWidth + ' ' + (this['getWidth']?this.getWidth():'')+' -');
            width += parseInt(this.offsetWidth);
        });
area.css('width', width);

<div id="scroll_wraper">
<div class="scroll_area" id="scroll">
<div class="area" id="area">
    <div class="category">
        <div class="category-image"><img src="img/1.jpg"/></div>
        <div class="category-block">Some text</div>
        <div class="category-block">Some text</div>
        <div class="category-block">Some text</div>
    </div>
    <div class="category">
        <div class="category-image"><img src="img/1.jpg"/></div>
        <div class="category-block">Some text</div>
        <div class="category-block">Some text</div>
        <div class="category-block">Some text</div>
    </div>
    <div class="clear"></div>
</div>
</div>
<div class="menu"></div>
</div>
<style>
.clear{clear: both; width: 0;}
.category {
    float: left;
}
.category .category-block, .category .category-image{
    float: left;
}
.category .category-block{
    width: 200px;
}
.category .category-image{
    width: 308px;
}
.scroll_area{
    width: 800px; height: 368px; overflow: auto;
    position: relative;
}
.scroll_area .area{
    position: absolute;
    left: 0; top: 0;
    height: 232px;
}
.scroll_area img {
    float: left;
}
</style>


Вот примерно так, как уже писал выше проверка размера вызывается только после DomLoaded.
Ответить с цитированием
  #6 (permalink)  
Старый 31.05.2010, 16:12
Аватар для Skipp
.
Отправить личное сообщение для Skipp Посмотреть профиль Найти все сообщения от Skipp
 
Регистрация: 30.03.2010
Сообщений: 1,813

А стили у тебя так же идут после элементов? И js у тебя идёт в каком месте, в head?
__________________
.
Ответить с цитированием
  #7 (permalink)  
Старый 31.05.2010, 16:17
Аспирант
Отправить личное сообщение для Kein Посмотреть профиль Найти все сообщения от Kein
 
Регистрация: 11.01.2010
Сообщений: 32

Js идет в head, а стили так и идут, прямо в хтмле
Ответить с цитированием
  #8 (permalink)  
Старый 31.05.2010, 16:23
Аватар для Skipp
.
Отправить личное сообщение для Skipp Посмотреть профиль Найти все сообщения от Skipp
 
Регистрация: 30.03.2010
Сообщений: 1,813

поставь стили в head, ради интереса
__________________
.
Ответить с цитированием
  #9 (permalink)  
Старый 31.05.2010, 16:27
Аспирант
Отправить личное сообщение для Kein Посмотреть профиль Найти все сообщения от Kein
 
Регистрация: 11.01.2010
Сообщений: 32

То же самое.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как определить порядковый номер элемента DOM ? dummer jQuery 7 17.01.2014 16:44
Как определить активное окно/вкладку? Chameleon Events/DOM/Window 5 19.03.2012 07:59
Как определить координата элемента thunder2 Events/DOM/Window 1 28.02.2010 08:26
Как определить id дочернего элемента DOM? Motonto Events/DOM/Window 1 09.04.2009 08:13
как определить позицию элемента относительно окна scuter Events/DOM/Window 5 07.05.2008 18:47