Słuchaj zmian szerokości/wysokości przeglądarki za pomocą jQuery

Question

Mam kilka elementów div, które są ustawione z absolutną pozycją (CSS), gdy strona jest gotowa i są ustawione względem innego stałego elementu div, który działa poprawnie. Jednak zanim strona zostanie załadowana i wszystko jest ustawione, jeśli rozmiar strony zostanie zmieniony, te bezwzględne divy nie śledzą zmian, przenosząc się do innych miejsc, które moim zdaniem mają podane wartości w stosunku do górnej i lewej strony ekranu.

Pozycja względnego elementu div, którego używam jako punktu początkowego do pozycjonowania wartości bezwzględnych, może również zmienić położenie względem tych nad nim.

Czy istnieje sposób, aby wysłuchać zmian w szerokości/wysokości przeglądarki, aby te elementy zostały umieszczone we właściwej pozycji.

Z góry dziękuję!

Answer 1

Najpierw należy rozpocząć od powiązania zdarzenia zmiany rozmiaru okna z wybraną funkcją.

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

Teraz możesz określić nowe wysokości i szerokości i wprowadzić zmiany na stronie.

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

Bez większej specyfiki na układzie trudno powiedzieć, jakie zmiany trzeba dokładnie ale to powinno Ci idą w dobrym kierunku.

Answer 2

Może nie być konieczne używanie JavaScriptu, jeśli chcesz umieścić swój element (elementy) względem innego elementu zamiast całego dokumentu. Możesz użyć "position: relative":

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

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

</div> 

Ponieważ myContainer ma position:relative, myelement zostanie umieszczony absolutnie ale względna do myContainer zamiast w stosunku do ogólnej dokumentu. Uzbrojony w to, możesz skonstruować dość skomplikowane, ale solidne pozycje, które będą mieć agnostyczne rozmiary przeglądarki.

Answer 3

Istnieje również ta wtyczka ze strony internetowej jqui.

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

tu jest demo: http://www.jqui.net/demo/mutate/

nadzieję, że to pomaga.