Skip to content

Instantly share code, notes, and snippets.

@tomfordweb
Last active April 11, 2019 21:33
Show Gist options
  • Save tomfordweb/d17843cacd6238e16118902f20ecec47 to your computer and use it in GitHub Desktop.
Save tomfordweb/d17843cacd6238e16118902f20ecec47 to your computer and use it in GitHub Desktop.
Equal height elements. I use it on resize and load events normally.
/**
* 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