Divs of equal height using jQuery script

What the script do ?
Script will calculate the maximum height from the set of elements. While calculating it will consider the padding applied through CSS also . So have fun

Click here to see a demo Download demo

How to call ?

$(document).ready(function(){
$(".my-equal-boxes").setEqualHeight();
});

JQuery extended function

   jQuery.fn.setEqualHeight=function(o) {
    	var maxHeight=0;
    	var maxElement=null;
     	jQuery(this).each(function(i) {
          		if((jQuery(this).height()+parseInt(jQuery(this).css("padding-bottom"))+parseInt(jQuery(this).css("padding-top")))&gt;maxHeight) {
    			maxHeight=jQuery(this).height()+parseInt(jQuery(this).css("padding-top"))+parseInt(jQuery(this).css("padding-bottom"));
    			maxElement=this;
    		}
    	});
    	jQuery(this).not($(maxElement)).each(function() {$(this).height(maxHeight-parseInt(jQuery(this).css("padding-top"))-parseInt(jQuery(this).css("padding-bottom")))})
    }

Bookmark It

equal width, jquery

This entry was posted on Saturday, February 21st, 2009, 4:37 am and is filed under web development. You can follow any responses to this entry through RSS 2.0. You can skip to the end and leave a response. Pinging is currently not allowed.

#1 by Sunil - February 23rd, 2009 at 22:44

I am sure this will be very useful :). Need some time to experiment on this

Reply Quote
#2 by Praveen Vijayan - February 23rd, 2009 at 22:48

Thanks yarr.. you save my day. It worked like magic. Thank you so much for your effort and for sharing this with rest of the community.

Reply Quote
#3 by Driss lebbat - July 14th, 2009 at 05:58

Thanks, it help a lot.

Reply Quote

No trackbacks yet.

we bring ideas

Divs of equal height using jQuery script

Recent Posts