Gravatar couramment utilisé Blog perso de Paul Da Silva

Redimensionner plusieurs éléments du DOM en jQuery

Posted on | avril 9, 2010 | 1 Comment

Je vois souvent la question se poser un peu partout sur le web : avec cette manie (bonne manie, mais manie tout de même)  de structurer les pages à grand renforts de <div> (en y ajoutant le plus souvent la propriété float) là où nos ancêtres (ou juste nous il y a quelques années) utilisaient une grande quantité de <table>, les présentations en plusieurs colonnes souffrent d’un défaut majeur : elles n’ont plus nécessairement la même longueur.

Il existe un certain nombre de solutions pour remédier à cela. Celle que je vous propose aujourd’hui se base sur un bête code javascript (ignoré des Serps donc, mais peu importe vu qu’il s’agit de mise en page) et plus précisément sur du jQuery.

L’idée est d’attribuer le même nom de classe à tous les éléments du DOM que l’on veut voir de la même taille et ensuite d’appeler, à la fin du chargement de la page, une fonction javascript qui va redimensionner tous les éléments correspondants à un sélecteur jQuery que l’on basera sur la fameuse classe ajoutée à tous les éléments à redimensionner.

L’avantage, par rapport aux autres solutions, est qu’elle ne nécessite presque aucun code supplémentaire et par conséquent, que l’on garde la logique sémantique de la page. Et, après tout, c’est là tout le but de l’abandon des <table> au profit des <div>.

Trêves de blabla, voici le code javascript, à ajouter de préférence dans un fichier séparé :

function redimensionner(selecteur){
var hauteur=0;
$(selecteur).each(function(){
if($(this).height()>hauteur) hauteur = $(this).height();
});

$(selecteur).each(function(){ $(this).height(hauteur); });
}

Il suffira ensuite d’appeler, au chargement de la page, ladite fonction en lui passant en argument le sélecteur jQuery qui matche nos éléments à redimensionner. Le code se chargera de déterminer la taille du plus grand élément et de mettre les autres à l’échelle.

Concrètement, il vous faudra ajouter le morceau de code suivant :

$(document).ready(function(){
redimensionner(‘div.toSize’);
});

Pour redimensionner tous les <div> ayant la classe toSize à la taille du plus grand de ces éléments. Pour plus de détails sur les sélecteurs jQuery, je vous renvoie à l’excellente doc en ligne.

Commentaires

One Response to “Redimensionner plusieurs éléments du DOM en jQuery”

  1. Macmicro
    mai 18th, 2010 @ 18 h 21 min

    Bonjour, étant toujours en train de scruter le web, j’ai fini par tomber sur votre site, l’article sur le redimensionnement des blocs div est intéressantes, ayant lu et relu et appliqué les codes cela ne semble pas marché chez moi, bref, j’ai deux div comme ceci et , ce qui fait que j’en ai un plus grand que l’autre, j’ai appliqué la class « toSize » à chacun, l’id est dans le CSS, j’ai mis la fonction dans un fichier séparé et le second code dans la page, j’aurai du normalement à l’affichage avoir le 2éme div se redimensionné sur le plus grand. Alors ou je me suis trompé, je suppose que la class= »toSize » ne doit pas être dans le CSS, mais un simple sélecteur pour le code JavaScript. Sinon cela m’aurait bien servi cette petite astuce., merci de l’avoir partagé.

Leave a Reply





Edito

Ancien journaliste, ancien entrepreneur, ancien (ir)responsable Pirate, actuel citoyen qui s'intéresse à la politique et à son évolution.

Read moar !.

Retrouvez moi sur :

Suivez moi sur twitter sur facebook sur wikipedia Ajouter ce blog a votre lecteur RSS

Bitcoin

bitcoin logo
1GZnMQ9wXyifxCnDEqg8CSGdngWcKWptHv

Piratons la démocratie

piratons la democratie

One more thing !

0100 0011 0110 1000 0110 0001 0110 1110 0110 0111 0110 0101 0111 0010 0010 0000 0110 1100 0110 0101 0010 0000 0110 1101 0110 1111 0110 1110 0110 0100 0110 0101 0010 0000 0110 0101 0110 1110 0010 0000 0111 0011 0010 0111 0110 0001 0110 1101 0111 0101 0111 0011 0110 0001 0110 1110 0111 0100 0010 0000 0010 1101 0010 0000 0110 1111 0110 1110 0010 0000 0111 0110 0110 0001 0010 0000 0110 0010 0110 1111 0110 1001 0111 0010 0110 0101 0010 0000 0111 0101 0110 1110 0010 0000 0110 0011 0110 1111 0111 0101 0111 0000 0010 0000 0011 1111

Tm9uIGNlbGVsIGzgIGVzdCBqdXN0ZSBwb3VyIHRlIGZhaXJlIHBlcmRyZSA1bW4gOyk=

Relationship Closeness Inventory

Promo code Genesis Mining

Sha 256 cloud mining

Best Bitcoin debit card

Zcash Mining