Слушайте изменения ширины / высоты браузера с помощью jQuery

Question

У меня есть несколько div, которые установлены с абсолютным положением (CSS), когда страница готова, и расположены относительно другого фиксированного div, который работает нормально. Однако, до того, как страница загружена и все настроено, если размер страницы изменяется, эти абсолютные div не следуют за изменениями, перемещаясь в другие места, которые, я думаю, им задаются значения относительно верхней и левой частей экрана. 1001 *

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

Есть ли способ прослушать изменения ширины / высоты браузера, чтобы эти дивы оставались в правильном положении.

Заранее спасибо!

Answer 1

Сначала вы хотите связать событие изменения размера окна с функцией по вашему выбору.

$(window).on("resize", methodToFixLayout);

Теперь вы можете определить новые высоты и ширины и отрегулировать страницу оттуда.

function methodToFixLayout( e ) {
    var winHeight = $(window).height();
    var winWidth = $(window).width();
    //adjust elements css etc.....
    //$("#someDiv").css('someProperty',someValue based on winHeight and winWidth);
}

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

Answer 2

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

<div id="myContainer" style="position:relative">

    <div id="myElement" style="position:absolute;left:100px;"></div>

</div>

Поскольку myContainer имеет position:relative, myElement будет позиционироваться абсолютно, но относительно относительно myContainer, а не относительно всего документа. Вооружившись этим, вы можете создавать довольно сложные, но надежные позиции, которые не зависят от размера браузера.

Answer 3

Существует также этот плагин с сайта jqui.

http://www.jqui.net/jquery-projects/jquery-mutate-official/

вот демо: http://www.jqui.net/demo/mutate/

надеюсь, это поможет.