Archives par étiquette : div

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.