views:

712

answers:

1

I use this code for equalizing columns:

jQuery.fn.equalHeight=function() {
var maxHeight=0;
this.each(function(){
 if (this.offsetHeight>maxHeight) {maxHeight=this.offsetHeight;}
});
this.each(function(){
 $(this).height(maxHeight + "px");
 if (this.offsetHeight>maxHeight) {
  $(this).height((maxHeight-(this.offsetHeight-maxHeight))+"px");
 }
});
};

..does a decent job, but I have an accordion menu in one of those columns which slides in/out changing the height of the column, equalheight doesn't play nice with it. Is it possible to equalize the columns each time they're resized?

Thanks heaps!

A: 

Okay, this works great cross-browser:

(function($) {

    $.fn.equalHeight = function(){
     var height = 0,
      reset = $.browser.msie ? "1%" : "auto";

     return this
      .css("height", reset)
      .each(function() {
       height = Math.max(height, this.offsetHeight);
      })
      .css("height", height)
      .each(function() {
       var h = this.offsetHeight;
       if (h > height) {
        $(this).css("height", height - (h - height));
       };
      });

    };

})(jQuery);
Nimbuz