jQuery: box di uguale altezza

Possiamo ottenere l'effetto di box di uguale altezza usando jQuery insieme al metodo max() dell'oggetto Math. In questo modo i nostri box avranno tutti la stessa altezza anche quando contengono un maggiore o minore numero di contenuti. Vediamo come.

Creiamo il seguente plugin, molto semplice:

(function($) {


	$.fn.equalHeight = function() {
	
	
		var that = this;
		
		return that.each(function() {
		
			var height = Math.max(that.height(), 0);
			
			that.height(height);
		
		});
	
	
	
	};


})(jQuery);

Il plugin estrae il valore massimo dell'altezza del box più alto nel set e lo usa per impostare l'altezza dei restanti box. Un esempio:

$(function() {

	$('div.box', '#container').equalHeight();

});

Potete visionare l'esempio finale in questa pagina.