Created
January 12, 2012 23:33
-
-
Save rquigley/1603805 to your computer and use it in GitHub Desktop.
equalizeHeights.js, a responsive-layout aware height equalizer
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*! | |
* 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