Skip to content

Instantly share code, notes, and snippets.

@rquigley
Created January 12, 2012 23:33
Show Gist options
  • Save rquigley/1603805 to your computer and use it in GitHub Desktop.
Save rquigley/1603805 to your computer and use it in GitHub Desktop.
equalizeHeights.js, a responsive-layout aware height equalizer
/*!
* equalizeHeights
* Force a number of elements to acquire the height of the tallest element
* Recalculate all heights on page resize
* Author: @rquigley
* Licensed under the MIT license
*/
(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery', 'underscore'], factory);
} else {
// Browser globals
factory(jQuery);
}
}(function ($, _) {
var cache = [];
var equalize = function(obj) {
var els = obj.els,
includeMargin = obj.includeMargin,
maxHeight = 0;
els.each(function() {
var h = $(this).outerHeight(includeMargin);
if (h > maxHeight) {
maxHeight = h;
}
});
els.css('height', maxHeight);
};
$.fn.equalizeHeight = function(includeMargin) {
var o = {
'els': $(this),
'includeMargin': includeMargin
};
cache.push(o);
equalize(o);
return this;
};
var onPageResize = function() {
var obj, n;
for (n = cache.length - 1; n >= 0; --n) {
obj = cache[n];
obj.els.css('height', 'auto');
equalize(obj);
}
};
$(window).on('resize', _.debounce(onPageResize, 300));
}));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment