jQuery carousel - auto expand height

Question

I have a functional vertical jquery carousel as i have tweaked and modified the script and example found here: http://sorgalla.com/projects/jcarousel/examples/static_vertical.html

Instead of images, i am using text as list items. this script uses an fixed height style, and i am trying to incorporate an auto expand height feature. To collapse and expand based on the content within the li.

i have tried a few things with the css like setting certain elements to height:auto; or height:100%; but does not seem to work.

would anyone have a tidbit on where i should focus my attempts on how to make this auto expand and collapse based on content? should i be tweaking the javascript and not the CSS?

just looking for insight.

Answer 1

It depends how your carousel works, but you're likely to need to tweak the javascript.

If the carousel needs elements with fixed heights, you could write content into an element, get the height, and then explicity set the height of the element to be the value you just found. That way the height depends on the content, but it is also fixed rather than fluid and you also know what the value for the height is.

Something like this might work:

var height = $("#my-li").css({'height':'auto'}).html('Some text content').height();
//do any calculations you need with height here
$("#my-li").css({'height':height+'px'})

Answer 2

Sorry Roy I think using javascript would probably be considered overdoing and bad practice even if it works.

I would suggest that Tony applies

   li { display:block; overflow:hidden; width:blabla px;}

Then the height will be forced to increase and decrease according to the content.