Skip to content

Instantly share code, notes, and snippets.

@ghorvat
Created September 15, 2015 12:15
Show Gist options
  • Save ghorvat/ceb36ab3812c4674372d to your computer and use it in GitHub Desktop.
Save ghorvat/ceb36ab3812c4674372d to your computer and use it in GitHub Desktop.
Equalize height function
(function ($) {
function equalizeHeights(selector, bigImageHeight) {
var heights = new Array();
// Loop to get all element heights
$(selector).each(function () {
// Need to let sizes be whatever they want so no overflow on resize
$(this).css('min-height', '0');
$(this).css('max-height', 'none');
$(this).css('height', 'auto');
// Then add size (no units) to array
heights.push($(this).outerHeight());
});
// Find max height of all elements
var max = Math.max.apply(Math, heights);
//console.log(max);
$(bigImageHeight).each(function(){
jQuery(this).find("img").css("height", (max * 2 + 20));
});
// Set all heights to max height
$(selector).each(function () {
$(this).css('height', max + 'px');
var hei = $(this).css('height', max + 'px');
});
}
$(window).ready(function () {
// Fix heights on page load
equalizeHeights(".equalizeH", ".testooo");
equalizeHeights(".contact");
equalizeHeights(".blocksCustom");
equalizeHeights(".equalizeHRetail");
// Fix heights on window resize
$(window).resize(function () {
window.onorientationchange = function () {
var orientation = window.orientation;
// Look at the value of window.orientation:
if (orientation === 90) {
jQuery(".equalizeH").css("height", "auto");
}
else if (orientation === -90) {
jQuery(".equalizeH").css("height", "auto");
} else if (orientation === 180) {
jQuery(".equalizeH").css("height", "auto");
}
};
// Needs to be a timeout function so it doesn't fire every ms of resize
setTimeout(function () {
equalizeHeights(".equalizeH", ".testooo");
equalizeHeights(".contact");
equalizeHeights(".blocksCustom");
}, 100);
});
});
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment