Accueil

Traduction

Tutoriel JavaScript & jQuery - sommaire

Sommaire partiellement masqué - faites défiler !

Tutoriel JavaScript & jQuery - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

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

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

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 :

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 :

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

Testez ce code :

Le rendu du code :

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 :

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 !

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

Déplacez les images !

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.