Javascript Girl
  1. Javascript Girl
  3. Écoutez les changements de largeur / hauteur du navigateur avec jQuery
Intereting Posts
Javascript: pourquoi "cela" dans la fonction privée se réfère à la portée globale? Effet de texte en cours Comment accéder aux dossiers locaux dans ajax en utilisant le fichier: /// F: / foldername? Mais cela fonctionne pour http: // La modification d'une copie d'un objet JavaScript provoque l'évolution de l'objet d'origine Le plugin d'informations réseau Cordova affiche régulièrement l'état hors ligne (UNKNOWN) Désélectionner des entités HTML en Javascript? Détecter un glissement de doigt par JavaScript sur iPhone et Android Changer la source d'image si le fichier existe Comment obtenir les données via ajax dans servlet? Puis-je changer la vue d'une vidéo 360 YouTube avec le gyroscope dans le navigateur? CSS3Pie provoquant une erreur de démarrage FormData append un élément en ordre Comment modifier la valeur de l'attribut HTML Object element data en javascript Uncaught TypeError: lang n'est pas une fonction Quel événement jQuery s'appelle juste après $ (document) .ready ()?

Écoutez les changements de largeur / hauteur du navigateur avec jQuery

J'ai des divs qui sont définis avec la position absolue (CSS) lorsque la page est prête et sont positionnés par rapport à une autre division fixe, qui fonctionne bien. Cependant, avant que la page ne soit chargée et que tout soit réglé, si la page est redimensionnée, ces divisions absolues ne suivent pas les changements, se déplacent vers d'autres endroits, ce qui me donne des valeurs par rapport au haut et à gauche de l'écran.

La position de la div relative que j'utilise comme point de départ pour positionner les absolus peut également changer de position par rapport à ceux qui sont au-dessus.

Existe-t-il un moyen d'écouter les changements dans la largeur / hauteur du navigateur pour que ces divs restent placés dans la bonne position.

Merci d'avance!

Tout d'abord, vous souhaitez commencer par relier l'événement de redimensionnement de la fenêtre à une fonction de votre choix. 

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

Maintenant, vous pouvez déterminer les nouvelles hauteurs et les 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 précisions sur votre mise en page, il est difficile de dire les changements dont vous aurez besoin exactement, mais cela devrait vous aider à aller dans la bonne direction.

Il se peut qu'il ne soit pas nécessaire d'utiliser JavaScript si vous avez seulement besoin de positionner votre (vos) élément (s) par rapport à un autre élément au lieu du document global. 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 une position:relative , myElement sera positionné absolument, mais relativement à myContainer plutôt que par rapport au document global. Armé de cela, vous pouvez construire des positions assez élaborées mais robustes qui seront agnostiques de taille de navigateur.

Il existe également ce plugin du site jqui.

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

Voici la démo: http://www.jqui.net/demo/mutate/

J'espère que cela aide.