jQuery : dimensionner et positionner une boite

Faut-il rappeler que les dimensions d'une boite HTML peuvent être passées en valeurs d'attributs (... width ="400") OU en valeurs de propriétés CSS et que ces dimensions peuvent être des pixels ou des pourcentages.
Quant au positionnement les boîtes peuvent être dans le flux ou positionnées en fixe, relatif ou absolu.

Récupérer les dimensions : solution déjà abordée

La méthode css ou attr argumentée avec width ou height permet à priori de récupérer la taille d'un élément.
Rappelons cette technique avec un exemple et montrons aussi les pièges de cette solution.

Le code CSS, HTML et Jquery de l'exemple

	<style>
		img{display : block ; margin :10px auto ; width : 30% ; }
	...
	<body>
	<p class ="remarque">Cliquez sur l'une des images pour connaître sa largeur et sa hauteur !
	<img src ="../images/bikini.jpg" />
	<img src ="../images/trikini.jpg" />
	<script>
	$("img").click(function() 
	{	
		var largeur = $(this).css("width");
		alert("largeur image :" + largeur);
		var largeur =$(this).attr("height"); 
		alert("hauteur image :" + largeur);
		var largeur =$(this).css("height"); 
		alert("hauteur image :" + largeur);
	});
	...

Notez que dans le cadre d'un "site adaptatif" la largeur de chaque image exprimée en % dans une règle de style CSS !

Ce script contient une erreur !

Lors d'un clic sur une des deux images Les deux premières instructions retournent une dimension en pixels mais la troisième instruction retourne "undefined" ...
Et c'est logique car la largeur de chaque image est définie par une propriété CSS (et non pas par un attribut).
Donc la méthode attr() utilisée dans la troisième instruction n'est pas applicable dans ce contexte !
C'est la méthode css() qui doit ici s'appliquer tant pour récupérer la largeur que la hauteur.

Testez ce code erroné :

Nouvelles méthodes pour récupérer/modifier les dimensions d'un élément

Pour récupérer les dimensions d'un élément HTML il est possible d'utiliser les méthodes jQuery width() et height().

Ces méthodes peuvent être utilisées que les dimensions aient été passées en attributs OU via le CSS.
De plus ces deux méthodes retournent toujours un numérique alors que les méthodes attr(), css() argumentées avec width ou height retournent toujours une donnée de type string. Ce qui oblige à une conversion avant incrémentation/décrémentation.

Exemple 1

...
<p>Cliquez sur une des images pour obtenir ses dimensions en pixels </p>
	<br><img src ="../images/trikini.jpg" style ="width : 30% ; height : auto ;"  />
	<br><img src ="../images/bikini23.jpg" width ="200px" height ="auto" />
	<br><img src ="../images/bikini24.jpg" class ="gauche">
	
<script>
$("img").click(function() 
	{	
		var largeur = $(this).width();
		var hauteur = $(this).height();
		alert("largeur et hauteur image  :" + largeur + " px " + hauteur + " px");
		
	});
</script>
...

La classe "gauche" définit une largeur de 50%.

Quelque soit la méthode employée pour définir la taille de l'image (en pixels ou en pourcentage, les méthodes width() & height retournent les dimensions en pixels.

Testez ce code :

Exemple 2

Dans ce deuxième exemple je vais vous montrer que les méthdodes width & height sont très utiles pour agrandir/réduire l'élément sélectionné.
Le code de l'exemple : ... <p>Cliquez sur une des images pour l'agrandir </p> <br><img src ="../images/trikini.jpg" style ="width : 20% ; height : auto ;" /> <br><img src ="../images/bikini23.jpg" width ="200px" height ="auto" /> <br><img src ="../images/bikini24.jpg" class ="logo"> <script> $("img").click(function() { var X = $(this).width() ; X = X +50; // incrémenter de 50 pixels la largeur $(this).width(X); }); </script> ...

Dans ce code je vous montre que la méthode width (ou height) est "getter" et "setter".
Comme ces méthodes retournent une valeur de type number, on peut directement incrémenter (ou décrémenter).
Testez ce code :

Récupérer la position d'un élément

Première technique

Elle consiste à utiliser la méthode css (argumentée avec top ou left).

Le code de l'exemple ci-dessous : ... <style> body {position : relative ; } img{display : block ; width : 20%;} img.flux {margin : 10px auto ; } img.relatif {position : relative ; top : 50px ; left :50px ; } img.absolu {position : absolute ; top : 100px ; left : 10px ; } img.fixe {position : fixed ; top : 200px ; left : 60px ; } </style> </head> <body> <p>En survolant chaque image vous apprennez le mode de positionnement. <p>Cliquez sur une image pour obtenir sa position ! <img src ="../images/trikini.jpg" class ="flux" title ="image dans le flux"/> <img src ="../images/brune_nue.jpg" class ="relatif" title ="image en relatif" /> <img src ="../images/jolie_fille.jpg" class ="absolu" title ="image en absolu" /> <img src ="../images/seins_nus.jpg" class ="fixe" title ="image en fixe" /> <script> $("img").click(function() { var x = $(this).css("left"); var y =$(this).css("top"); alert("position de l'image : " + x + " " + y); }); ...

une image positionnée dans le flux et centrée
une image positionnée en relatif
une image positionnée en absolu
une image positionnée en fixe

Le script retourne le "left" et le "top" de chaque image.

Testez ce code :

Le rendu du code :

l'image dans le flux la réponse est "auto auto"
l'image en absolu la réponse est "10px 110px"
l'image en relatif la réponse est "50px 50px"
l'image en fixe la réponse est "60px 200px"

Ces informations ne sont pas très exploitables !

Deuxième technique : méthode offset

Cette méthode est beaucoup plus intéressante et beaucoup plus simple à mettre en oeuvre.

Le code CSS & HTML est strictement identique !
Le script : $("img").click(function() { var x = $(this).offset().left; var y =$(this).offset().top; x = parseInt(x); y = parseInt(y); alert("left : " + x + " top : " + y); });

Testez ce code :

Pour chaque image on récupère sa position par rapport au coin haut gauche de la fenêtre !

N'hésitez pas à réduire la fenêtre pour constater la variation des coordonnées (sauf pour l'image positionnée en fixe).

Le positionnement : déplacer les objets

Je vais vous montrer maintenant que la méthode offset est non seulement "getters" mais aussi "setters".
Rappel : ces deux termes sont d'horribles anglicismes pour indiquer qu'une méthode permet non seulement de récupérer la valeur d'un paramètre (to get = "obtenir") mais de le modifier (to set = "modifier").
Donc je peux déplacer l'objet courant avec la méthode offset.

Le code CSS & HTML de la page est identique à celui de l'exemple précédent.
Seul change le script ! $("img").click(function() { var x = $(this).offset().left; var y = $(this).offset().top; x= x+50 ; y = y+50 ; $(this).offset({left: x , top : y}); });

Notez la notation JSON pour paramétrer la méthode offset en mode "setters".

Déplacez les images !

Remarque

L'image cliquée est forcément déplacée en bas et à droite.
Si vous voulez la déplacer dans n'importe quelle direction il faut faire un "drag & drop" (glisser-déposer).
Cet outil est disponible chez jQuery mais pas dans la bibliothèque de base. Il faut utiliser une extension : jQuery UI.
Tout un chapitre est consacré aux "widgets" (outils) de l'extension jQuery UI.

Traduction

Tutoriel sur JS natif, Vue.js, jQuery.js & Node.js

JavaScript natif

Framework Vue.js

Framework jQuery.js

Node.js

Tutoriel JavaScript - recherche

L'auteur : Patrick Darcheville

jQuery : dimensionner et positionner une boite

Récupérer les dimensions : solution déjà abordée

Le code CSS, HTML et Jquery de l'exemple

Nouvelles méthodes pour récupérer/modifier les dimensions d'un élément

Exemple 1

Exemple 2

Récupérer la position d'un élément

Première technique

Deuxième technique : méthode offset

Le positionnement : déplacer les objets

Remarque