Colonnes à hauteurs égales en jQuery

Voici un petit bout de code jQuery servant à modifier la hauteur de plusieurs colonnes en fonction de la plus haute.

Idéalement, utilisez une balise de type block comme <div> et attribuez leur un nom de classe commun pour les regrouper.

function hauteurEgale(group) {
   tallest = 0;
   group.each(function() {
      thisHeight = $(this).height();
      if(thisHeight > tallest) {
         tallest = thisHeight;
      }
   });
   group.height(tallest);
}

/*
Usage:
$(document).ready(function() {
   hauteurEgale($(".articles-recents"));
});
*/

Votre code HTML devrait ressembler à ceci :

<div class="articles-recents">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam volutpat blandit semper. Duis dapibus tincidunt dictum. Donec sollicitudin pellentesque lacus, vel viverra metus.</div>
<div class="articles-recents">Suspendisse eget lacus ac sapien semper mollis ac non arcu. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora.</div>
<div class="articles-recents">Nullam eu quam at mi rhoncus volutpat sed vitae nibh. Sed quis diam quis nibh feugiat vestibulum ac eget libero. Phasellus pretium euismod quam iaculis fringilla.</div>

Mots-clés : code, colonnes, Conception Web, Design Web, hauteur, Javascript, jQuery

Cet article a été publié le Vendredi 16 juillet 2010 à 11:01
Vous pouvez en suivre les commentaires par le biais du flux RSS 2.0.
Les commentaires et rétroliens sont fermés.

• Tweet