Update : code désormais disponible sous forme de plug-in !
Plug-in jQuery
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
(function($){ "use strict"; $(document).ready(function(){ $.fn.extend({ setEqualHeight: function(chunkSize){ var length = this.length; if(typeof(chunkSize) == 'undefined'){chunkSize = length;} for (var i=0; i<length; i+=chunkSize){ var columns = this.slice(i, i+chunkSize); var max = 0; columns.each(function(){ var current = $(this).height(); if(current > max) {max = current;} }); columns.height(max); } } }); }); })(jQuery); |
Dans le template HTML
Le paramètre setEqualHeight() sert à déterminer le nombre d’éléments par ligne (3 éléments par ligne dans le code d’exemple ci-dessous).
|
|
<script type="text/javascript"> (function($){ "use strict"; $(document).ready(function(){ $('#shelfList .shelf-line').setEqualHeight(3); }); })(jQuery); </script> |
Remarque #1: Il reste la possibilité de définir depuis vos feuilles de styles des propriétés
et
pour gérer des hauteurs minimum et maximum pour vos blocs.
Utiliser ce plug-in dans le cadre d’un site responsive
Faire fonctionner jQuery $(window).width() et CSS3 Media Queries de concert
Source : Firing Responsive jQuery Functions based on CSS Media Queries Rather than Window Width
Mettre en place le redimentionnement et le re-calcul des hauteurs côté jQuery
Il est indispensable de réinitialiser la hauteur du bloc ou de la colonne ciblée par le redimensionnement, sinon le plug-in ne sera pas capable d’écraser la valeur qu’il a précédemment affecté.
|
|
(function($){ "use strict"; $('.abo-offre').css({height: 'auto'}).setEqualHeight(2); $(window).on('resize', function(){ $('.abo-offre').css({height: 'auto'}).setEqualHeight(2); }); })(jQuery); |
Si erreur « TypeError: $(…).css(…).setEqualHeight is not a function »
Remplacer le code du plug-in comme suit :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
(function($){ "use strict"; $.fn.extend({ setEqualHeight: function(chunkSize){ var length = this.length; if(typeof(chunkSize) == 'undefined'){chunkSize = length;} for (var i=0; i<length; i+=chunkSize){ var columns = this.slice(i, i+chunkSize); var max = 0; columns.each(function(){ var current = $(this).height(); if(current > max) {max = current;} }); columns.height(max); } } }); })(jQuery); |
…et utiliser la fonction comme suit :
|
|
<script type="text/javascript"> (function($){ "use strict"; $(document).ready(function(){ $('.shelf-line .shelf-label').css({height: 'auto'}).setEqualHeight(2); $('.shelf-line .shelf-description').css({height: 'auto'}).setEqualHeight(2); }); $(window).on('resize', function(){ $('.shelf-line .shelf-label').css({height: 'auto'}).setEqualHeight(2); $('.shelf-line .shelf-description').css({height: 'auto'}).setEqualHeight(2); }); })(jQuery); </script> |
Si les éléments ciblés ne prennent pas la même hauteur au chargement de la page…
…mais seulement une fois que la fenêtre est redimensionnée, utiliser le plug-in dans la forme donnée plus haut dans le paragraphe Si erreur « TypeError: $(…).css(…).setEqualHeight is not a function » et déclenchez le de façon suivante :
|
|
(function($){ "use strict"; $(window).on('load', function(){ // http://stackoverflow.com/questions/9134918/document-ready-fires-too-early $('.shipping-mode-list .tab-wrapper').css({height: 'auto'}).setEqualHeight(); }); $(window).on('resize', function(){ $('.shipping-mode-list .tab-wrapper').css({height: 'auto'}).setEqualHeight(); }); })(jQuery); |
Ancien article…
Source : http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/
Simulation : http://jsfiddle.net/frontenddeveloper/6GPKn/
|
|
// http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/ function setEqualHeight(columns) { var tallestcolumn = 0; columns.each(function() { currentHeight = jQuery(this).height(); if(currentHeight > tallestcolumn) { tallestcolumn = currentHeight; } }); columns.height(tallestcolumn); } jQuery(document).ready(function() { setEqualHeight(jQuery("ol.my-list li")); }); |