Tutoriel sur Javascript, Vue.js, jQuery.js & Node.js

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

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

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

Le code HTML

Les dimensions des images sous forme d'attributs ou de propriété CSS (directement ou via une classe).

Le script

$("img").click(function() 
	{	
		var largeur = $(this).width();
		var hauteur = $(this).height();
		alert("largeur et hauteur image  :" + largeur + " px " + hauteur + " px");
		
	});

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.

Testons 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 HTML

Le script

$("img").click(function() 
	{	
		var X = $(this).width() ; 
		X = X +50; // incrémenter de 50 pixels la largeur
		$(this).width(X);
	});

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

Testons ce code

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

La première solution consiste à utiliser la méthode css (argumentée avec top ou left).
Mais il y a beaucoup plus simple : utiliser la méthode offset().

Exemple

Dans une page des images sont positionnées selon différentes techniques : dans le flux, en absolu, en fixe, en relatif.

Code CSS et HTML

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

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

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

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.