Last active
January 11, 2016 17:35
-
-
Save errogaht/fc7e9864f5c48035c74d to your computer and use it in GitHub Desktop.
JavaScript Common css height for child elements
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
/** | |
* 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