Combining jQuery Cycle (Lite) and a liquid layout

Question

Combining jQuery Cycle (Lite) and a liquid layout

1.2k Views Asked by poisontofu At 10 April 2025 at 14:48

This has been driving me nuts for a while now – I want to combine the jQuery Cycle Lite plugin with a simple liquid layout.

My problem is that the content below the slideshow disappears underneath it – when the slideshow JS is active, it seems the div that contains the slideshow has a height of 0px. If I remove the slideshow code (and just use a still image instead) the div is pushed to the correct height by the image inside it.

As the slideshow itself scales with the liquid layout, I can't specify a px height for the slideshow. Can anyone suggest a workaround?

Code is below, but it might help to view the example I've been working with at http://jsbin.com/ubufi5/edit.

Thanks for reading!

HTML/CSS:

<head>
  <meta charset="utf-8" />
  <title>Slideshow in a liquid layout</title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
  <script type="text/javascript" src="http://misc.somnambulist.org/jquery.cycle.lite.1.0.js"></script>

  <style type="text/css">
    body { max-width: 1120px;  margin: 100px auto; border: 1px solid #ff0; background: #666;}
    body img { width: 100%; }
  </style>
</head>
<body id="home">
  <h1>Test</h1>
  <div id="slidebox">
    <img src="http://misc.somnambulist.org/test2.jpg" />
    <img src="http://misc.somnambulist.org/test4.jpg" />
  </div>
  <h2>Lots of text here so it clears the image</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

JS:

$(function() {
  $('#slidebox').cycle();
});

Original Q&A

There are 2 best solutions below

**poisontofu** · Answer 1

I've solved this using the below jQuery which checks for the tallest image on load and maintains the height of the #slidebox div accordingly when the window is resized (example here), but I'm going to leave this question open for a while in the hope that there's some gobsmackingly basic CSS thing I've somehow overlooked, or at least an explanation as to why I'm encountering this issue.

function SetHeightToTallestChild(i) {
  var tallest = 0;
  $(i).children().each(function(){
    var h = $(this).height();
    if(h > tallest)
      tallest = h;
  });
  $(i).height(tallest);
}

$(document).ready(function() {
  SetHeightToTallestChild('#slidebox');
  $(function() {
      $('#slidebox').cycle();
  });  
  $(window).resize(function() {
    SetHeightToTallestChild('#slidebox');
  });
});

**benhowdle89** · Answer 2

benhowdle89 On 25 February 2011 at 12:40

body {
overflow:  auto;
min-height: 100%;
}

Combining jQuery Cycle (Lite) and a liquid layout

There are 2 best solutions below

Related Questions in CSS

Related Questions in JQUERY-PLUGINS

Related Questions in JQUERY-CYCLE

Trending Questions

Popular # Hahtags

Popular Questions