Skip to content

Instantly share code, notes, and snippets.

@errogaht
Last active January 11, 2016 17:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save errogaht/fc7e9864f5c48035c74d to your computer and use it in GitHub Desktop.
Save errogaht/fc7e9864f5c48035c74d to your computer and use it in GitHub Desktop.
JavaScript Common css height for child elements
/**
* Common height for all .common-height__item placed inside parent wrapper
* with .common-height selector
*
* Example:
*
* <div class="common-height">
* <div class="common-height__item"></div>
* <div class="common-height__item"></div>
* <div class="common-height__item"></div>
* </div>
*
* .common-height__item can be any level deep inside .common-height
* no matter is .common-height__item strict child or no
*/
(function () {
setTimeout(function () {
var
commonHeightClass = '.common-height',
childSelector = '.common-height__item',
$commonHeightEl = $(commonHeightClass),
commonHeight = function (element) {
var maxHeight = 0;
element.find(childSelector).each(function () {
var element = $(this);
console.log(element, element.outerHeight());
if (element.hasClass('max-height')) {
maxHeight = element.outerHeight();
} else {
if (element.outerHeight() > maxHeight) {
maxHeight = element.outerHeight();
}
}
});
element.find(childSelector).each(function () {
$(this).height(maxHeight);
});
},
maxHeight = function () {
if ($commonHeightEl.length > 0) {
$commonHeightEl.each(function () {
var element = $(this);
if (element.has(commonHeightClass)) {
commonHeight(element.find(commonHeightClass));
}
commonHeight(element);
});
}
};
maxHeight();
}, 250);
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment