Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
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.
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.
$("img").click(function() { var x = $(this).offset().left; var y =$(this).offset().top; x = parseInt(x); y = parseInt(y); alert("left : " + x + " top : " + y); });
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.
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".
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.