Разные значения ширины элементов при загрузке страницы, jQuery?

Question

[Егор]

Задача:
Есть выпадающее меню на сайте. В выпадающем окне есть колонки разной ширины. Необходимо подсчитать ширину всех колонок и задать эту ширину родительскому контейнеру.

Родился такой код

function calculateColsWidth(){
  $('.main-menu .main-menu__item--parent').each(function(){
    var subcolsContainer = $(this).find('.b-subcols');
    var contWidth = 0;
    $('.subcol-col',subcolsContainer).each(function(){
      	contWidth+= $(this).outerWidth(true);
      	console.log('contWidth= '+contWidth);
    });
    
    if(contWidth > 980)
      contWidth = 980;
    subcolsContainer.width(contWidth);
    
  }); 
  
}

Вызов функции после загрузки страницы

window.onload = function(){
   calculateColsWidth();
}

Однако ширина колонок считается неправильно. После первого вызова функции ширина каждой колонки на 10px меньше. При повторном вызове функции через консоль все высчитывает верно.

Не могу понять, почему так происходит.

Браузер - Хром.

Буду рад любой помощи.

Ссылка с кодом jsfiddle.net/ckL6p/1

Answer 1

[Сергей Полозов]

есть ли картинки? функция windows.onload - загружает только html, но при этом картинки могут менять размеры элементов, воспользуйтесь плагином waitforimages

Comments

[Егор]

Картинок нет. Только ссылки. Колонки это списки, т.к такая схема. div.subcolsContainer > div.col > ul > li > a

[Сергей Полозов]

попробуйте заменить

window.onload = function(){
   calculateColsWidth();
}

на

$(document).ready(function(){
calculateColsWidth();
});

?

[Егор]

никаких изменений.

[Сергей Полозов]

могли бы выложить на jsfiddle весь код?

[Егор]

jsfiddle.net/ckL6p/1

Answer 2

[Ольга Стогова]

у меня вопрос – нужно просто чтобы блок с вторым уровнем меню ( и его подкатегориями) расстягивался по ширине всего меню? правильно?

Comments

[Егор]

нет. нужно чтобы правильно считалась ширина каждой колонки.

[Ольга Стогова]

@ByKraB а это делается для того чтобы задать ширину блока второго уровня меню?)

[Ольга Стогова]

@ByKraB я не докапываюсь) я серьезно хочу помочь, но мне нужно знать что и зачем нужно сделать)

[Егор]

это делается, чтобы понять, почему ширина считается неправильно. я могу придумать и другие реализации, чтобы было как надо. Меня интересует, почему ширина считается неверно и как это пофиксить.

[BIG_bu]

что значит неверно?

[Егор]

при первом вызове, как только страница загрузилась, выдает на 10 пикселей меньше для каждого элемента. Если после загрузки вызвать функцию через консоль, выдает верные значения размеров.