Tutoriel Hauteurs Égales avec jQuery

[LawYor]

Salut à tous, dans ce tutoriels, vous apprendrez un peu plus sur la fameuse librairie jQuery. Nous allons voir comment attribuer des hauteurs égales à des éléments html.

Commencez par inclure la librairie jQuery

<script src="jquery.js" type="text/javascript"></script>

À titre d’exemple, mettons ce contenu :

<p>
        <strong>Block 1</strong><br/><br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida mattis arcu eu vulputate. Nullam eget elit ante, vel commodo nibh. Morbi pellentesque, mauris sit amet venenatis interdum    
    </p>
    <p>
        <strong>Block 2</strong><br/><br/>
        metus, non elementum lacus mi ut leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.   
    </p>
    <p>
        <strong>Block 3</strong><br/><br/>
        Aenean a orci et neque gravida cursus. Mauris rhoncus sapien vulputate orci lobortis tincidunt. Etiam bibendum augue leo, id semper enim. 
    </p>
    <p>
        <strong>Block 4</strong><br/><br/>
       Ut bibendum diam nec risus blandit mattis. Morbi facilisis purus eu lorem pellentesque fringilla. Nullam neque metus, porttitor nec semper et, dictum non mi. Integer suscipit rutrum elit dapibus pulvinar.
    </p>

Car un peu de style n’a jamais fait de mal à personne

p  {
   float: left;
   padding: 10px;
}

Maintenant, voici le script, Tadaa !

$(document).ready(function(){
 
    var maxHeight = 0; 
    $('p').each(function() { 
        var thisHeight = $(this).height(); 
        if(thisHeight > maxHeight) { 
            maxHeight = thisHeight;
        }
    });
    $('p').height(maxHeight); // Application de la hauteur sur les éléments
});

Décortiquons ce code..

D’abord, on initialise la variable maxHeight qui vaut au début : 0.

Ensuite, nous allons passer les éléments « p » un par un pour tester si sa hauteur vaut plus que la variable maxHeight.

Ainsi, maxHeight vaudra la hauteur la plus grande.

Et enfin, on applique la nouvelle valeur à tous les blocks

Source:Geeknoise