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 (... style = "width : 400px; ...").
Précisions qu'il est toujours préférable de dimensionner un élément de type "block" via le CSS !
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 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 l'exemple buggé !

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.

Le code HTML & CSS de l'exemple


	<p>Cliquez sur l'image / la boîte  pour l'agrandir</p>
	<img src ="../images/trikini.jpg" style ="width : 35px ; height : 50px ;"  />
	<canvas width = "500" height ="300" id ="canevas" style ="background : lime;" ></canvas>
...

Notez que les dimensions initiales de l'élément IMG sont définies par des propriétés CSS alors que les dimensions initiales de l'élément CANVAS sont passées en attributs.

Le script

...

	var X = $("img").width() ;
	var Y = $("img").height();
	alert("dimensions initiales image : "+ X + " " + Y) ;
	alert("type : " + typeof(X)); 
	var XB = $("#canevas").width() ;
	var YB = $("#canevas").height();
	alert("dimensions initiales canevas : "+ XB + " " + YB) ;
	alert("type : " + typeof(XB)); 
	
$("img").click(function()
{
	X +=35 ; Y +=50 ;
	$(this).width(X);
	$(this).height(Y);
});
$("#canevas").click(function()
{
	XB +=50 ; YB +=50 ;
	$(this).width(XB);
	$(this).height(YB);
});
...

quatre instructions alert qui vous signalent que les méthodes width() et height retournent toujours des valeurs numériques et qu'elle peuvent s'appliquer quelque soit la façon dont les dimensions de l'objet ont été définies.
une fonction qui agrandit l'image sur clic
une fonction qui agrandit la boîte sur clic

Via ce script, je vous montre aussi que les méthodes width() et height sont aussi "getters" et "setters". C'est à dire qu'elles permettent non seulement de récupérer des dimensions d'une boite mais aussi de modifier celles-ci.

Essayez ce code !

Autres méthodes jQuery relatives aux dimensions

Une boite peut avoir une largeur totale beaucoup plus grande que sa largeur définie par le width.
Faut-il rappeler que la largeur totale d'une boîte est obtenue en ajoutant au "width" les marges internes gauche et droite, les marges externes gauche et droite et les bordures gauche et droite.

Le code CSS et HTML de l'exemple

...
<style>                     
	div { margin : 10px ; padding : 5px ; border :1px solid black; }
	#boite1 {width : 15% ; height :120px ; background : lime ;  }
	#boite2 {width : 30% ; height : 100px ; background : yellow ; }
...
<body>
	<p class ="remarque">Cliquez sur l'une des deux boites pour avoir des infos sur ses dimensions.
	<div id ="boite1">Boîte 1</div>
	<div id="boite2">Boîte 2</div>
...

Les dimensions des boîtes DIV sont passées en propriétés CSS.
La largeur de chaque boîte exprimée en %.
Notez la bordure de 1px, la marge interne (padding) de 5px et la marge externe (margin) de 10px pour chaque boîte DIV.

Le script

$("div").click(function()
{
		var info = $(this).width() ;
		alert("largeur interne de la boîte : " +info);
		info = $(this).innerWidth() ;
		alert("largeur interne de la boîte+ marges interne gauche et droite : " +info);
		info = $(this).outerWidth() ;
		alert("largeur interne de la boîte+ marges interne gauche et droite + bordure : " +info);
		info = $(this).outerWidth(true) ;
		alert("largeur totale de la boîte : " +info);
}) ;

width() largeur interne de l'élément (sans marges et bordures gauches et droites)
innerWidth() largeur interne plus marges internes gauche et droite
outerWidth() largeur interne de l'élément plus marges internes et bordures gauches et droites
outerWidth(true) largeur totale de l'élément (largeur interne + marges internes et externes + bordures gauches et droites)

Ici innerWidth retourne 10 (2 fois 5) de plus que width.
outerWidth() retourne 2 (2 fois 1) de plus que innerWidth.
outerWidth(true) retourne 20 (2 fois 10) de plus que outerWidth().

height() hauteur interne de l'élément (sans marges et bordures hautes et basses)
innerHeight() hauteur interne plus marges internes haute et basse
outerHeight() hauteur interne de l'élément plus marges internes et bordures hautes et basses
outerHeight(true) hauteur totale de l'élément (hauteur interne + marges internes et externes + bordures hautes et basses)

Testez le code ci-dessus !

Attention les infos retournées sont exprimées en pixels alors que la largeur de chaque boîte est exprimée en % de la largeur de BODY (qui lui même est fonction de la largeur de la fenêtre). Donc les infos retournées sont fonction de la largeur de la fenêtre.

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 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 class ="remarque">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 le 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 !
C'est seulement pour l'image positionnée en fixe que les résultats indiquent la position par rapport au coin haut gauche de la fenêtre.
Pour les autres images c'est la position par rapport à la boîte parente (position : absolute) ou "auto auto" (position dans le flux) ou le décalage par rapport au positionnement dans le flux(position :relative).

Deuxième technique : méthode offset

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); });

Essayez avec la méthode offset

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".

Amusez vous à déplacer 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 JavaScript & jQuery - sommaire

JavaScript

jQuery - célèbre bibliothèque JavaScript

Tutoriel JavaScript & jQuery - 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

Le code HTML & CSS de l'exemple

Le script

Autres méthodes jQuery relatives aux dimensions

Le code CSS et HTML de l'exemple

Le script

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