Maintain equal height when resizing (jQuery)
I am using this code to align 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 that slide in / out by changing the height of the column, equalheight doesn't play well with it. Is it possible to align columns every time they change?
Thanks heaps!
+2
source to share
1 answer
Ok, 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);
+4
source to share