Created
November 25, 2014 19:29
-
-
Save fanian/9b1cc5b08ac158d1d4cb to your computer and use it in GitHub Desktop.
Normalize Carousel Heights - pass in Bootstrap Carousel items
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
// Normalize Carousel Heights - pass in Bootstrap Carousel items. | |
$.fn.carouselHeights = function() { | |
var items = $(this), //grab all slides | |
heights = [], //create empty array to store height values | |
tallest; //create variable to make note of the tallest slide | |
var normalizeHeights = function() { | |
items.each(function() { //add heights to array | |
heights.push($(this).height()); | |
}); | |
tallest = Math.max.apply(null, heights); //cache largest value | |
items.each(function() { | |
$(this).css('min-height',tallest + 'px'); | |
}); | |
}; | |
normalizeHeights(); | |
$(window).on('resize orientationchange', function () { | |
//reset vars | |
tallest = 0; | |
heights.length = 0; | |
items.each(function() { | |
$(this).css('min-height','0'); //reset min-height | |
}); | |
normalizeHeights(); //run it again | |
}); | |
}; | |
jQuery(function($){ | |
$(window).on('load', function(){ | |
$('#carousel .item').carouselHeights(); | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I'm seeing the same issue as robertdavId010, in IE9 and Firefox. It works fine in Chrome tho. It seems that FF doesn't calculate the height of hidden .items very well.