-
-
Save avantegarde/dc392b511b8ec9181abf to your computer and use it in GitHub Desktop.
Match Height is a jQuery-free pure JavaScript plugin that will measure the height of a group of elements and assign each of them the highest value.
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
/* | |
# The Mad CSScientist's Matching Height Plugin | |
written by Tommy Hodgins: http://codepen.io/tomhodgins/pen/pjmKNj | |
## Usage | |
This plugin will measure the height of a group of elements and assign each of them the highest value. | |
To group elements together, assign each element a `data-col` attribute with the same value. This way, the plugin can calculate the heights of different groups of elements on the same page. | |
<div data-col=example1></div><div data-col=example1></div> | |
<div data-col=example2></div><div data-col=example2></div> | |
In this example both `data-col=example1` elements will be matched in height, and both `data-col=example2` will be matched to each other as well. | |
*/ | |
onload = onresize = function(){ | |
var cols = document.querySelectorAll('[data-col]'), | |
encountered = [] | |
for (i=0;i<cols.length;i++){ | |
var attr = cols[i].getAttribute('data-col') | |
if (encountered.indexOf(attr) == -1){ | |
encountered.push(attr) | |
} | |
} | |
for (set=0;set<encountered.length;set++){ | |
var col = document.querySelectorAll('[data-col="'+encountered[set]+'"]'), | |
group = [] | |
for (i=0;i<col.length;i++){ | |
col[i].style.height = 'auto' | |
group.push(col[i].scrollHeight) | |
} | |
for (i=0;i<col.length;i++){ | |
col[i].style.height = Math.max.apply(Math,group)+'px' | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment