Last active
April 11, 2019 21:33
-
-
Save tomfordweb/d17843cacd6238e16118902f20ecec47 to your computer and use it in GitHub Desktop.
Equal height elements. I use it on resize and load events normally.
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
/** | |
* Set the height to that of the tallest element for all shared selectors | |
* selector string querySelectorAll | |
* responsive bool whether or not to reset height before calculating tallest | |
**/ | |
function eqHeight(selector, responsive = true) { | |
var findClass = document.querySelectorAll(selector); | |
// if we don't find any of the elements...back out. | |
if (!findClass.length) return; | |
var tallest = 0; | |
var tallestHeight = 0; | |
// first we have to find the tallest matching element. | |
for (i = 0; i < findClass.length; i++) { | |
var ele = findClass[i]; | |
// clear out current height so we can calculate new height. | |
if(responsive) { | |
ele.style.height = ""; | |
} | |
var eleHeight = ele.offsetHeight; | |
tallest = eleHeight > tallest ? eleHeight : tallest; | |
if (ele.classList.contains("anchor")) { | |
tallestHeight = eleHeight; | |
tallest = tallestHeight; | |
} | |
} | |
console.log('test', tallest); | |
// set all elements to tallest height | |
for (i = 0; i < findClass.length; i++) { | |
findClass[i].style.height = tallest + "px"; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment