jQuery Plugin to 'matchHeight' of Multiple Columns With Floating Elements

Billy Heaton 1 min read

(function($) {
/**
* .matchHeight()
* - match heights of multiple columns that use css layout with floating elements
*/
$.fn.matchHeight = function(options) {
// set the containing element and set elements used as columns
var defaults = {
container : '.main',
columns : 'div',
excluded : '.dontChangeThis, .dontChangeThat',
fixed : 200
};
var opts = $.extend(defaults, options);
return this.each(function() {
var _ = { self : $(this) };
.px = {};
_.cols = $(opts.container+' > '+opts.columns);
_.cols.each(function(index) {
_.px.index = $(this).height();
if ($(opts.excluded).length>0) {
_.colheight = opts.fixed;
return;
} else {
if (index < 1) {
_.colheight = _.px.index;
} else {
if (.px.index > _.colheight) {
_.colheight = _.px.index;
}
}
}
}).each(function(index) {
$(this).css({ height : _.colheight });
});
});
};
})(jQuery);

//
// Call the plugin on a containing layout element with multiple columns
//

/**
 * Stuff to do as soon as the DOM is ready
 *  - enable plugin behavior(s)
 */
$(function() {
    $('.main-container')matchHeight({
                container : '.main',
                columns   : 'div.cols',
                excluded  : 'body.page2, div.noColumns',
                fixed  : 200
     });
    // or us the defaults
    // $('.container').matchHeight();
});

About the Author

Billy Heaton
Billy Heaton

Software engineer with two decades of experience who favors Ruby and JavaScript to build web applications