Escuche los cambios de ancho/alto del navegador con jQuery

Question

Tengo algunos divs que se establecen con posición absoluta (CSS) cuando la página está lista, y se ubican en relación con otro div fijo, que funciona bien. Sin embargo, antes de que se cargue la página y todo esté configurado, si la página se redimensiona, esos divs absolutos no siguen los cambios, moviéndose a otros lugares, que creo que reciben valores relativos a la parte superior e izquierda de la pantalla.

La posición de la div relativa que uso como punto de partida para posicionar las absolutas también puede cambiar de posición, en relación con las que están sobre ella.

¿Hay alguna manera de escuchar los cambios en el ancho/alto del navegador para que esos divs permanezcan en la posición correcta?

¡Gracias de antemano!

Answer 1

Primero, desea comenzar vinculando el evento de redimensionamiento de la ventana a la función que elija.

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

Ahora puede determinar las nuevas alturas y anchuras y hacer ajustes a la página desde allí.

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

Sin más detalles sobre el diseño que es difícil saber qué cambios que necesita exactamente, pero esto debe conseguir que va en la dirección correcta.

Answer 2

Puede que no sea necesario utilizar JavaScript si solo necesita colocar su elemento (s) relativo a otro elemento en lugar del documento en general. Puede utilizar "position: relative":

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

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

</div> 

Debido myContainer tiene position:relative, myElement será absolutamente posicionado pero relativa a myContainer en lugar de en relación con el documento general. Armado con esto, puede construir posiciones bastante elaboradas, pero robustas, que serán independientes del tamaño del navegador.

Answer 3

También existe este complemento del sitio web jqui.

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

aquí es de demostración: http://www.jqui.net/demo/mutate/

espero que ayude.