javascript jquery resize height width

javascript - Escucha los cambios de ancho/alto del navegador con jQuery



width() js (3)

Tengo algunos divs que se configuran con posición absoluta (CSS) cuando la página está lista, y están posicionados 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 se cambia el tamaño de la página, esos divs absolutos no siguen los cambios y se mueven a otros lugares, lo que creo que reciben valores relativos a la parte superior e izquierda de la pantalla.

La posición del div relativo que uso como punto de partida para posicionar los absolutos también puede cambiar de posición, en relación con los de arriba.

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

¡Gracias por adelantado!

Primero desea comenzar con el enlace del evento de cambio de tamaño de la ventana a una función de su elección.

$(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 en su diseño, es difícil decir qué cambios necesitará exactamente, pero esto debería llevarlo en la dirección correcta.

Puede que no sea necesario usar JavaScript si solo necesita posicionar sus elementos en relación con otro elemento en lugar del documento general. Puedes usar "position: relative":

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

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