jQuery.info
Découvrir et utiliser jQuery, la librairie javascript du XXIIème siècle

Accueil du site > Trucs et astuces > Un repas équilibré

Un repas équilibré

samedi 26 août 2006, par Fil

CSS ne permet pas directement d’équilibrer la hauteur de différentes boîtes. Un coup de javascript et c’est réglé... avec jQuery c’est en trois lignes.


Notre document est composé d’une <div class="equilibre">, laquelle contient plusieurs sous-éléments qu’on veut équilibrer (c’est-à-dire à qui on va donner la hauteur de l’élément le plus haut).

On commence par indiquer ce qui doit se passer lorsque la page est prête :

<script type="text/javascript"><!--
$(document).ready(function() {
 $(".equilibre").each(function(){
   ...
 });
});
// --></script>

Ici, tout élément portant la classe .equilibre va se voir appliquer une fonction. Cette fonction consiste à parcourir tous les sous-éléments de notre élement ($(">*", this)), pour d’abord leur appliquer à tous une fonction permettant de calculer le maximum :

function(){ h=Math.max(h,this.offsetHeight); }

On enchaîne ensuite avec l’application d’une propriété css sur tous ces éléments : .css({'height': h+'px'});

D’où le code complet :

<script type="text/javascript"><!--
$(document).ready(function() {
 $(".equilibre").each(function(){
   var h=0;
   $(">*", this)
     .each(function(){ h=Math.max(h,this.offsetHeight); })
     .css({'height': h+'px'});
 });
});
// --></script>

Une bonne partie de l’intérêt des objets jQuery réside dans cette capacité à enchaîner des fonctions sur une série d’éléments.

P.-S.

C’est http://www.weblogger.ch/blog/archiv... qui m’a donné envie d’équilibrer des boîtes, façon jQuery.

Documents joints

Répondre à cet article

4 Messages de forum


Derniers commentaires