Redimensionner plusieurs éléments du DOM en jQuery

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.

1 réflexion sur « Redimensionner plusieurs éléments du DOM en jQuery »

  1. Macmicro

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

Les commentaires sont fermés.