I installed the flexslider from woothemes on my webpage and the <div class="flex-viewport"
is added to the site automatically via the jquery.flexslider.js
on line 621.
I have to adjust the height to a fixed value of 790px but the height is somehow calculated. I'm looking for the line in flexslider.js where the height is added to .flex-viewport
. Does somebody know how I can add a fixed height here?
Thanks.
Code:
<div id="slider" class="flexslider">
<div class="flex-viewport" style="overflow: hidden; position: relative; height: 710px; ">
<ul class="slides" style="width: 1200%; -webkit-transition: 0.6s; -webkit-transform: translate3d(-4900px, 0px, 0px); ">
Basically flexslider doesn't have a feature for fixed height according to its document. But I found some code to solve this problem here in the official repository by calculating the tallest height to supply the height of slide.
$(document).ready(function() {
fixFlexsliderHeight();
});
$(window).load(function() {
fixFlexsliderHeight();
});
$(window).resize(function() {
fixFlexsliderHeight();
});
function fixFlexsliderHeight() {
// Set fixed height based on the tallest slide
$('.flexslider').each(function(){
var sliderHeight = 0;
$(this).find('.slides > li').each(function(){
slideHeight = $(this).height();
if (sliderHeight < slideHeight) {
sliderHeight = slideHeight;
}
});
$(this).find('ul.slides').css({'height' : sliderHeight});
});
}