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

Question

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

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

Есть ли способ прослушать изменения ширины/высоты браузера, чтобы эти элементы 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/

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