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

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

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

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

Спасибо заранее!

Ответы

Ответ 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);
}

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

Ответ 2

Возможно, нет необходимости использовать JavaScript, если вам нужно только позиционировать элементы (элементы) относительно другого элемента вместо общего документа. Вы можете использовать "position: relative":

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

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

</div>

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