JavaScript slider that automatically resizes

Question

I am trying to create a content slider for a client that displays the last four messages. Now this is just plain HTML, but I have a problem.

The slider should be 180 pixels high with the scroll bar when necessary. My slider seems to work, except that the slide boxes are as tall as the tallest box. This leaves short posts with tons of empty space below them.

Does anyone know a fix?

http://jsfiddle.net/insitedesignlab/kQDcb/1/

I saw Quovolver doing this, but I would like to know how

Answer 1

Main problem: #slidesContainer needs to be dynamically changed so that the parent can know how much time it takes to scroll. One way to solve the problem is to change your animated call to include a callback:

$('#slideInner').animate({ 'marginLeft' : slideWidth*(-currentPosition) },null,null, function(){ $('#slidesContainer').css('height', $(this).children(".slide:nth-child(" + parseInt((Math.ceil(-1*slideWidth*(-currentPosition) / $("#slideshow").width())) + 1) + ")").height() + "px"); } ); 

There is probably a slightly better way to do this calculation, but it will work. You can also hide all other .slide divs that are not displayed. Then #slidesContainer will automatically resize only to the visible (not visible: none) slide.

Answer 2

I updated your code here with JS Fiddle . You need to remove the min-height property and set the background color in the slide div.