Joined December 2015
·

Sven Burkert

Weiden, Germany
·

The resize event fires twice on my webpage, and I had to use "height" instead of "min-height", that's my version of your script:


$(window).load(function() {
$('.carousel').each(function(){
$(this).carouselHeights();
});
});

// Normalize Bootstrap Carousel Heights
$.fn.carouselHeights = function() {
var items = $(this).find('.item'), // grab all slides
heights = [], // create empty array to store height values
tallest, // create variable to make note of the tallest slide
call;
var normalizeHeights = function() {
items.each(function() { // add heights to array
heights.push($(this).outerHeight());
});
tallest = Math.max.apply(null, heights); // cache largest value
items.css('height', tallest);
};
normalizeHeights();
$(window).on('resize orientationchange', function() {
// reset vars
tallest = 0;
heights.length = 0;
items.css('height', ''); // reset height
if(call){
clearTimeout(call);
};
call = setTimeout(normalizeHeights, 100); // run it again
});
};
</pre>

Achievements
1 Karma
0 Total ProTip Views