Посчитать сумму ширины вложенных блоков

@andr-xw · Регистрация: 05.03.2013

Author24 — интернет-сервис помощи студентам

Вот чего нагуглил сам

Javascript

var allwidth = 0;
var submenuby = $('#sub-'+id+' .submenuby');
for (var key in submenuby) {
    // ?
}

submenuby[key] является HTMLDivElement, но submenuby[key].outerWidth(true) почему-то не работает...

@Faust971 · 19.04.2014, 14:34

У вас какой то непонятный кусок кода откуда то выдернутый, вот способ например:

Javascript

$(document).ready(function()
{   
    var full_weight=0;
    $("#omg div").each(function(){
    full_weight+=$(this).width();
    });
    alert(full_weight);
});

HTML5

<div id="omg">
<div>Блок 1</div>
<div>Блок 2</div>
<div>Блок 3</div>
<div>Блок 4</div>
<div>Блок 5</div>
</div>

Разновидности ширины:
width()(используется в моем коде) — ширина элемента без учета отступов и толщины рамки.
innerWidth() — ширина элемента с учетом размера внутренних отступов (padding).
outerWidth(includeMargin) — ширина элемента с учетом внутренних отступов, рамки (border-width) и при необходимости внешних отступов (margin)

@andr-xw · 19.04.2014, 15:18 **[ТС]**

Работает, но возвращаемые значения далеки от реальных.
innerWidth() и outerWidth(true) возвращают 40, а width() и вовсе 0.
Хотя реальный размер каждого блока начинается от 100 и конечный размер зависит от внутреннего контента.

@Faust971 · 19.04.2014, 15:44

Приведите html код и как вы указываете селектор $("#omg div") на него, у меня все верно показывает.
С какой целью вам нужно определять ширину? Может найдем более рациональный способ.

@andr-xw · 19.04.2014, 19:02 **[ТС]**

$('#sub-'+id+' .submenuby'). Ну, в консоли показывает нужные блоки.

А нужно для того, чтобы задать размер родительского блока.
Поясню. Есть меню из <ul><li></li></ul>, которое вызывает подменю <div>, которое состоит из трех вложенных дивов с float:left, предлагающих разные условия выборки. Ширина каждого из этих трех блоков зависит от анкоров расположенных в них ссылок, ну а родительский блок соответственно от ширины этих блоков. Позиция родительского дива (абсолют) высчитывается от начала соответствующего элемента <li>.

Так вот, у крайнего правого <li> блок получается настолько широким, что не влезает в ширину монитора 1024, поэтому 3й вложеный див уходит на вторую строку, оказываясь под первым.

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

HTML5

<div id="sub-<?= $menu->id; ?>" class="submenu">
    <div class="submenuby">
        <ul>
        <?php // тут формирется список ?>
        </ul>
    </div>
    <div class="submenuby">
        <ul>
        <?php // тут формирется список ?>
        </ul>
    </div>
    <div class="submenuby">
        <ul>
        <?php // тут формирется список ?>
        </ul>
    </div>
</div>

HTML5

<style>
.submenu {
    display: none;
    border: 1px solid #afb0b3;
    position: absolute;
    background: white;
}
.submenuby {
    float: left;
    padding: 20px;
}
</style>

Javascript

$('li.menu').hover(
    function () {
        var id = $(this).attr('id').replace(/nav-/g, '');
        $('#sub-'+id).css({
            left: $(this).offset().left,
            top: $(this).offset().top + $(this).outerHeight(true)
        });
        $('#sub-'+id).stop(true, true).fadeTo('fast', 1);
    },
    function () {
        var id = $(this).attr('id').replace(/nav-/g, '');
        $('#sub-'+id).hover(
            function () {
                $(this).stop(true, true).fadeTo('fast', 1);
            },
            function () {
                $(this).stop().hide('normal');
            }
        );
        $('#sub-'+id).stop().hide('normal');
    }
);

@Faust971 · 19.04.2014, 20:18

Сообщение от andr-xw

поэтому 3й вложенный див уходит на вторую строку, оказываясь под первым.

Абсолютно естественное поведение браузера. Представьте у вас 3 блока .submenuby 1 шириной 300px 2 500px 3 600px итого:1400px и присвоите вы их 1400px наружнему блоку с Position: absolute которому итак абсолютно пофигу на ширину экрана, его ширина и есть ширина этих блоков + ваши padding 20px у каждого блока .submenuby, он обтекает ваши блоки по их размеру. Как эти 1400px не помещались в 1024 так и не будут помещаться вам нужно содержимое этих 3 блоков submenuby уменьшать.

@andr-xw · 19.04.2014, 21:19 **[ТС]**

1400 не будет, вообще среднее значение 400-500, ну максимум 700.

@Faust971 · 19.04.2014, 23:50

А ещё padding 20px на каждом блоке даст +120px к общей ширине+6px границы и не факт что ещё у submenuby
на наружнем блоке не висит какой нибудь padding.
Есть возможность всю страницу в html скинуть вместе c css прям ту которая в браузере выдается?

Добавлено через 2 часа 14 минут
Понял я твою проблему тебе надо блок сдвигать влево если он вылазить за край. Косяк в верстке пытаешься скриптами компенсировать. Закинь для начала div в li главного меню вот так чтоб было

HTML5

1	<li><a>Пункт меню</a><div class="submenu"></div></li>

Далее на li задай в css position:relative;
Дальше надо вычислять что блок вылазит и выравнивать тогда по правому краю относительно пунтка меню
Вот это удали left: $(this).offset().left, в скрипте потом как сделаешь скинь опять ссылку в ЛС .

@andr-xw · 20.04.2014, 12:29 **[ТС]**

Это не косяк в верстке, а специально так сделано. Если добавить div в li то к диву и его дочерним элементам добавятся все стили li и его родительских элементов. Вот где настоящие косяки в верстке начинаются... Да и проблему это не решает, те же яица только в профиль.

И мне в любом случае интересно, почему js считает ширину блока нулевой и возвращает только паддинги?

@Faust971 · 20.04.2014, 15:38

Сообщение от andr-xw

И мне в любом случае интересно, почему js считает ширину блока нулевой и возвращает только паддинги?

Потому что у блока display:none соответственно clientWidth на этот момент равен 0. У вас можно через свойство css получить эту ширину $(this).css("width"); В любом случае это ничего не даст у вас он вылезает потому что там идет
свойство left+ширина блока и как вы не меняйте ширину наружнего блока он как не влезал так и не влезет, нужно менять left в зависимости от этого.

Сообщение от andr-xw

Это не косяк в верстке, а специально так сделано. Если добавить div в li то к диву и его дочерним элементам добавятся все стили li и его родительских элементов. Вот где настоящие косяки в верстке начинаются... Да и проблему это не решает, те же яица только в профиль.

А что вам мешает прописать

HTML5

.submenu ul li
{
ваши стили для списков подменю и они перекроют параметры родителя
}

В ещё есть такая вещь как:
Селектор 1 > Селектор 2 { Описание правил стиля }
Стиль применяется к Селектору 2, но только в том случае, если он является дочерним для Селектора 1.

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

HTML5

#nav .submenu ul li
{
ваши стили для списков подменю и они перекроют параметры родителя
}

@andr-xw · 10.05.2014, 17:57 **[ТС]**

Сообщение от Faust971

Потому что у блока display:none соответственно clientWidth на этот момент равен 0.

Спасибо. Убрал display:none, поставил top:-100500. Теперь все как надо.

@andr-xw 123 / 77 / 33 Регистрация: 05.03.2013 Сообщений: 449
	10.05.2014, 17:57 [ТС]	11
	Сообщение от Faust971 Потому что у блока display:none соответственно clientWidth на этот момент равен 0. Спасибо. Убрал display:none, поставил top:-100500. Теперь все как надо. 0

@andr-xw 123 / 77 / 33 Регистрация: 05.03.2013 Сообщений: 449
	19.04.2014, 15:18 [ТС]	3
	Работает, но возвращаемые значения далеки от реальных. innerWidth() и outerWidth(true) возвращают 40, а width() и вовсе 0. Хотя реальный размер каждого блока начинается от 100 и конечный размер зависит от внутреннего контента. 0

@Faust971 69 / 69 / 50 Регистрация: 25.03.2012 Сообщений: 241
	19.04.2014, 15:44	4
	Приведите html код и как вы указываете селектор $("#omg div") на него, у меня все верно показывает. С какой целью вам нужно определять ширину? Может найдем более рациональный способ. 0

@Faust971 69 / 69 / 50 Регистрация: 25.03.2012 Сообщений: 241
	19.04.2014, 20:18	6
	Сообщение от andr-xw поэтому 3й вложенный див уходит на вторую строку, оказываясь под первым. Абсолютно естественное поведение браузера. Представьте у вас 3 блока .submenuby 1 шириной 300px 2 500px 3 600px итого:1400px и присвоите вы их 1400px наружнему блоку с Position: absolute которому итак абсолютно пофигу на ширину экрана, его ширина и есть ширина этих блоков + ваши padding 20px у каждого блока .submenuby, он обтекает ваши блоки по их размеру. Как эти 1400px не помещались в 1024 так и не будут помещаться вам нужно содержимое этих 3 блоков submenuby уменьшать. 0

@andr-xw 123 / 77 / 33 Регистрация: 05.03.2013 Сообщений: 449
	19.04.2014, 21:19 [ТС]	7
	1400 не будет, вообще среднее значение 400-500, ну максимум 700. 0

@andr-xw 123 / 77 / 33 Регистрация: 05.03.2013 Сообщений: 449
	20.04.2014, 12:29 [ТС]	9
	Это не косяк в верстке, а специально так сделано. Если добавить div в li то к диву и его дочерним элементам добавятся все стили li и его родительских элементов. Вот где настоящие косяки в верстке начинаются... Да и проблему это не решает, те же яица только в профиль. И мне в любом случае интересно, почему js считает ширину блока нулевой и возвращает только паддинги? 0