Skip to content

Instantly share code, notes, and snippets.

@jlavoie13
Last active April 3, 2024 02:27
Show Gist options
  • Save jlavoie13/a53d802949c98727c85f to your computer and use it in GitHub Desktop.
Save jlavoie13/a53d802949c98727c85f to your computer and use it in GitHub Desktop.
Equal Height Divs
jQuery(window).load(function() {
// Equal Height Divs - http://css-tricks.com/equal-height-blocks-in-rows/
equalheight = function(container) {
var currentTallest = 0,
currentRowStart = 0,
rowDivs = [],
$el,
topPosition = 0;
jQuery(container).each(function($) {
$el = jQuery(this);
jQuery($el).height('auto')
topPosition = $el.offset().top;
if (currentRowStart != topPosition) {
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
rowDivs.length = 0; // empty the array
currentRowStart = topPosition;
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);
}
});
}
// Get viewport width
var responsive_viewport = jQuery(window).width() + getScrollBarWidth();
// Equal Height Resize Settings
jQuery(window).resize(function() {
responsive_viewport = jQuery(window).width() + getScrollBarWidth();
if (responsive_viewport >= 768) {
equalheight('.equal-height-item');
} else if (responsive_viewport < 768) {
jQuery('.equal-height-item').height('auto');
}
});
/* if smaller than 768px */
if (responsive_viewport < 768) {
jQuery('.equal-height-item').height('auto');
}
/* if is larger to 768px */
if (responsive_viewport >= 768) {
equalheight('.equal-height-item');
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment