Animate container height? about flexslider HOT 8 CLOSED

I am doing it like this:

        start: function(slider){ // init the height of the first item on start
            var $new_height = slider.slides.eq(0).height();     
            slider.height($new_height);                                     
        },          
        before: function(slider){ // init the height of the next item before slide
            var $new_height = slider.slides.eq(slider.animatingTo).height();                
            if($new_height != slider.height()){
                slider.animate({ height: $new_height  }, 250);
            }
        }

Works fine

from flexslider.

Thanks for getting back. That works ok but not well with media queries. When you scale the window, the height of the container doesn't resize appropriately.

That's ok though, i've moved on to just using the cycle plugin and fixed heights.

from flexslider.

Not a difficult task at all:

$(document).ready(function() {
    var $flexslider = jQuery('.flexslider').flexslider({
        start: function(slider){ // init the height of the first item on start
            var $new_height = slider.slides.eq(0).height();
                
            /* add a current class to the active item */
            slider.slides.removeClass('current');
            slider.slides.eq(0).addClass('current');
                
            slider.container.height($new_height);
                                                    
        },          
        before: function(slider){ // init the height of the next item before slide
            var $animatingTo = slider.slides.eq(slider.animatingTo);
            var $new_height = slider.slides.eq(slider.animatingTo).height();                
            
            /* add a current class to the active item */
            slider.slides.removeClass('current');
            $animatingTo.addClass('current');
            
            if($new_height != slider.container.height()){
                slider.container.stop().animate({ height: $new_height  }, 250);
            }
        }           
    });
});

$(window).resize(function() {   
    clearTimeout(this.id);
    this.id = setTimeout(doResizeSlide, 500);           
})
    
function doResizeSlide() {
    var slider = jQuery('.flexslider ul.slides');
    var newHeight = jQuery('li.current', slider).height();          
    slider.stop().animate({ height: newHeight });   
}

The timeout is set to avoid conflicts on resize with responsive columns layout like skeleton or similar.

Cheers

from flexslider.

smoothHeight property has been added to FlexSlider 2, baking in this functionality.

from flexslider.

Where is this functionality implemented? I don't see a 2.x branch available, or a commit to latest code that implements this "smoothHeight" property...

Needing this on a current use case, and would prefer to use a baked in functionality before implementing the suggestion(s) above.

from flexslider.

On my local machine... :)

FlexSlider 2 beta branch will go up soon. Very soon.

from flexslider.

I'm implementing the above solution by doitmax as a temporary fix while I wait for flexslider 2's native smoothHeight property (thanks in advance mbmufffin!).

It works perfectly on iOS devices for me (both iPhone and iPad) but not in Firefox, Chrome, or Safari on the desktop. On the desktop browsers, the slide height starts to animate like it's collapsing to the correct height, then pops back to the height of the largest slide. Any ideas?

from flexslider.

@doitmax Thank you!
Those lines did work well for me, I've just to make a few changes on timings (animation slider/height slider) to get it working.

from flexslider.