View Comments

We have created this jQuery function to equalize DOM item heights based on CSS classes. Useful for block boxes.

jQuery.fn.equalHeights = function() {
	var maxHeight = 0;
	// get the maximum height
	this.each(function(){
		var $this = jQuery(this);
		if ($this.height() > maxHeight) { maxHeight = $this.height(); }
	});
	// set the elements height
	this.each(function(){
		var $this = jQuery(this);
		$this.height(maxHeight);
	});
};

Now you can call the function on when document loads this way:

jQuery(window).load(function() {
	var classes = new Array("className1","className2" );
	classes.each(function(className) {
        				var selector = '.' + className;
        				jQuery(selector).equalHeights();
        		});
        	
});

IMPORTANT NOTE: remember to use allways $(window).load instead of $(document).ready because if your item contains images they aren't still loaded when $(document).ready is executed.