We are about to change to jQuery from Mootools, so I’m in the process of porting our current javascript functions. I’ll do a separate post later on why we are changing.
In the meantime here is the code for equal height columns:
jQuery.fn.equalHeights=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");
}
});
};
It is called like this:
$("#cont-pri,#cont-sec,#hleft,#hright,#features,#snw").equalHeights();
The jQuery function returns an object containing only the elements found, so you can include identifiers that are not on every page and the function still works. On the RNZ site there are some divs on the home page that do not appear on other pages, but require the equal heights treatment. This means the call above works on any page without generating errors.
Leave a comment