Created
October 9, 2013 22:04
-
-
Save landru247/6909272 to your computer and use it in GitHub Desktop.
JavaScript: Equal Height Columns - works with responsive layouts. See http://codepen.io/micahgodbolt/pen/FgqLc for example.
This file contains 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
/* Thanks to CSS Tricks for pointing out this bit of jQuery | |
http://css-tricks.com/equal-height-blocks-in-rows/ | |
It's been modified into a function called at page load and then each time the page is resized. One large modification was to remove the set height before each new calculation. */ | |
equalheight = function(container) { | |
var currentTallest = 0, | |
currentRowStart = 0, | |
rowDivs = new Array(), | |
$el, | |
topPosition = 0; | |
$(container).each(function() { | |
$el = $(this); | |
$($el).height('auto') | |
topPostion = $el.position().top; | |
if (currentRowStart != topPostion) { | |
for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) { | |
rowDivs[currentDiv].height(currentTallest); | |
} | |
rowDivs.length = 0; // empty the array | |
currentRowStart = topPostion; | |
currentTallest = $el.height(); | |
rowDivs.push($el); | |
} else { | |
rowDivs.push($el); | |
currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest); | |
} | |
for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) { | |
rowDivs[currentDiv].height(currentTallest); | |
} | |
}); | |
} | |
$(window).load(function() { | |
equalheight('.main-wrapper .equal-height'); | |
}); | |
$(window).resize(function() { | |
equalheight('.main-wrapper .equal-height'); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment