2

I love the effect that the initial smoothHeight has when the page loads. I hate the way it slowly reacts to a page resizing after the initial load. I would love to keep the effect for the initial page load, and then fall back to the default resizing without animation. I have been chasing this for hours. By setting the smoothHeight variable back to false at the end of the smoothHeight function itself I can switch the variable back to false after the initial animation, but this disables any resizing of the height after the initial load. This feels like a very simple operation, but I can't figure it out. Thanks ahead of time for any ideas!

Basically, when this block is executed once, it sets the height so that, even once the variable is changed back to false, the height is no longer flexible.

smoothHeight: function(dur) { if (!vertical || fade) { var $obj = (fade) ? slider : slider.viewport; (dur) ? $obj.animate({"height": slider.slides.eq(slider.animatingTo).height()}, dur) : $obj.height(slider.slides.eq(slider.animatingTo).height()); } }

ben p
  • 21
  • 1
  • 4
  • Good work, useful. You should chop out the answer part and add it as an actual answer to your own question, marking it as correct. – McNab Dec 12 '12 at 20:04

2 Answers2

0

This seems to have done it, I set the smoothHeight variable back to "false" at the beginning of the resize function, so that after the initial page load it won't try to animate height on resize. Then, I set the slider.viewport height to "100%" in the resize function, which resets the height and from then on resizing the page acts responsively :) Last but not least, I added the resetHeight boolean variable to the top of the script that is set to false when resize runs for the first time, so that it doesnt waste resources setting the viewport height to 100% every time the page is resized.

resize: function() { if(resetHeight) { slider.viewport.height("100%"); resetHeight=false;} if (!slider.animating && slider.is(':visible')) { if (!carousel) slider.doMath(); if (fade) { // SMOOTH HEIGHT: methods.smoothHeight(); } else if (carousel) { //CAROUSEL: slider.slides.width(slider.computedW); slider.update(slider.pagingCount); slider.setProps(); } else if (vertical) { //VERTICAL: slider.viewport.height(slider.h); slider.setProps(slider.h, "setTotal"); } else { // SMOOTH HEIGHT: if (vars.smoothHeight) methods.smoothHeight(); slider.newSlides.width(slider.computedW); slider.setProps(slider.computedW, "setTotal"); } } }, smoothHeight: function(dur) { if (!vertical || fade) { var $obj = (fade) ? slider : slider.viewport; (dur) ? $obj.animate({"height": slider.slides.eq(slider.animatingTo).height()}, dur) : $obj.height(slider.slides.eq(slider.animatingTo).height()); } },

ben p
  • 21
  • 1
  • 4
0

Disable smooth height FlexSlider on resize and transition height FlexsSider on resize.

In my case I had to stop the FlexsSider to smoothly adapt to viewport height after resize.

the Solution was not in the .js file.

I Just hat to eliminate the transition effect in the .css, this was creating the delay:

.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}

Changed to this:

.flex-viewport {max-height: 2000px;}

Best Regards

MikroDel
  • 6,705
  • 7
  • 39
  • 74
cremax
  • 1