jQuery Cycle plugin - Automatic height for containers

Question

I'm using the cycle plugin on some divs, like this:

<div class="sections">
  <div class="Section"> <img /> text </div>
  <div class="Section"> <img /> text </div>
  <div class="Section"> <img /> text </div>
</div>

all the .section divs have variable height, based on their contents. How can I make cycle not to resize the container div (sections) to the largest child height? Instead I want the container to resize on every animation to the current child height.

there's no css at all for .sections/.section. Should I add any CSS? the html above is located in the page sidebar. Below it other content can be added, that's why I need auto-height container — Alex, Jul 08 '10 at 12:32

score 21 · Answer 1 · answered Jul 08 '10 at 12:54

21

ok, I managed to do it by hooking a function on 'after' event:

function onAfter(curr, next, opts, fwd) {
  var $ht = $(this).height();

  //set the container's height to that of the current slide
  $(this).parent().animate({height: $ht});
}

found the info here: http://forum.jquery.com/topic/jquery-cycle-auto-height

answered Jul 08 '10 at 12:54

Alex

66,732
177
439
641

1

This is great, but how can I get cycle to recalculate the height again after adding inline content dynamically? – Florian Dec 14 '11 at 20:36

score 12 · Accepted Answer · answered Jul 08 '10 at 12:40

12

set containerResize option to 0 and try. More option details here.

answered Jul 08 '10 at 12:40

Teja Kantamneni

17,402
12
56
86

2

You have to use the full version, not lite. – eveevans Sep 17 '11 at 17:19

score 1 · Answer 3 · answered Apr 23 '14 at 19:15

I've done it a little bit different:

  $('.cycle-list').cycle({
    containerResize: 0,
    before: function(currSlideElement, nextSlideElement, options, forwardFlag) {
      var container = $(this).parent();
      container.css('height', Math.max(container.height(), $(nextSlideElement).height()));
    },
    after: function(currSlideElement, nextSlideElement, options, forwardFlag) {
      $(this).parent().css('height', $(this).height());
    }
  });

My items had different height as well. In the before, it makes sure the container is big enough for the bigger of the 2 slides. In the after, it just resizes to the next slide. This way it never over-flows because your container is too small.

note: this is for cycle 1

jQuery Cycle plugin - Automatic height for containers

3 Answers3