Écoutez la largeur navigateur/hauteur change avec jQuery

Question

J'ai quelques divs qui sont définies avec la position absolue (CSS) lorsque la page est prête, et sont positionnés par rapport à un autre div fixe, Wich fonctionne très bien. Cependant, avant que la page soit chargée et que tout soit positionné, si la page est redimensionnée, ces divs absolus ne suivent pas les changements, se déplaçant vers d'autres endroits, auxquels je pense qu'ils reçoivent des valeurs relatives en haut et à gauche de l'écran.

La position de la div par rapport je l'utilise comme point de départ pour positionner les absolues peuvent changer de position et, par rapport à ceux au-dessus.

Est-il possible d'écouter les changements de largeur/hauteur du navigateur afin de rendre ces divs rester placé dans la bonne position.

Merci d'avance!

Answer 1

D'abord, vous voulez commencer par lier l'événement resize fenêtre à une fonction de votre choix.

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

Maintenant, vous pouvez déterminer les nouvelles hauteurs et largeurs et faire des ajustements à la page à partir de là.

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

Sans plus de détails sur votre mise en page, il est difficile de dire ce que les changements que vous aurez besoin exactement, mais cela devrait vous permettre d'aller dans la bonne direction.

Answer 2

Il peut ne pas être nécessaire d'utiliser JavaScript si vous ne devez positionner votre élément (s) par rapport à un autre élément au lieu du document dans son ensemble. Vous pouvez utiliser "position: relative":

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

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

</div> 

Parce que myContainer a position:relative, myElement sera positionné tout à fait, mais par rapport à myContainer au lieu de par rapport à l'ensemble du document. Armé de ceci, vous pouvez construire des positions assez élaborées mais robustes qui seront agnostiques au niveau du navigateur.

Answer 3

Il y a aussi ce plug-in sur le site jqui.

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

ici est démo: http://www.jqui.net/demo/mutate/

espère que cela aide.