View Full Version : Featured Content Slider v2.4 variable/liquid height?

12-08-2010, 01:09 AM
1) Script Title: Featured Content Slider v2.4

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm (http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm)

3) Describe problem: How do you display the featured content if the contentdivs have variable heights? I tried setting .sliderwrapper and .sliderwrapper .contentdiv height to 100% (also on body, html), but that rendered the same thing as a height of 'auto' ... which is basically a height of 0 and, therefore, doesn't display the contentdivs. Is variable/liquid height even possible using this script? Any pointers would be very much appreciated :D

12-09-2010, 08:20 AM
Just to confirm, I assume you're talking just about making the content DIVs (class="contentdiv") so they are variable heights? If so you should be able to do this just by removing the below line inside the .css file:

.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0; /*leave as is*/
top: 0; /*leave as is*/
padding: 5px;
background: white;
width: 390px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
height: 100%;
-moz-opacity: 1;
opacity: 1;

This should cause the content DIVs to just default to the height of the content contained inside it.

06-06-2011, 02:13 PM
Hi, I have the same problem as topic creator. That's why I didn't create new topic.
I'd like to have each pagination content variable height, according to height of it. Already did what ddadmin wrote using fresh FCS copy.

For example,
tab-1 have content about 500px in height,
tab-2 -> 300px,
tab-3 -> 700px;
Under contentslider I have some other text, images, doesn't matter what exactly.

So, in CSS file I define .sliderwrapper height: 500px;
First tab selected - all fine.
Selecting tab-2: there's nice blank space.
Selecting tab-3: obviously doesn't fit in content slider.

I was thinking, I could (but I can't) add some code in change slide event that gets height of curindex and change .sliderwrapper height value according to it.

Maybe there's better solution?


06-06-2011, 10:58 PM
Why define the height to be explicitly 500px if you want each content's height to dictate the outer container's height? Simply remove the attribute.

06-07-2011, 08:41 AM
I already did that 2 years ago and yesterday - slider's content just dissappears.
Script is intact, I only deleted height: 250px; and height: 100%;

I attached images with my problem and my test environment.

06-07-2011, 09:46 AM
turnpage:function(setting, thepage, autocall){
var currentpage=setting.currentpage //current page # before change
var totalpages=setting.contentdivs.length
var turntopage=(/prev/i.test(thepage))? currentpage-1 : (/next/i.test(thepage))? currentpage+1 : parseInt(thepage)
turntopage=(turntopage<1)? totalpages : (turntopage>totalpages)? 1 : turntopage //test for out of bound and adjust
if (turntopage==setting.currentpage && typeof autocall=="undefined") //if a pagination link is clicked on repeatedly
this.cleartimer(setting, window["fcsfade"+setting.id])
if (setting.enablefade[0]==true){
if (setting.enablefade[0]==false){ //if fade is disabled, fire onChange event immediately (verus after fade is complete)
setting.contentdivs[setting.prevpage-1].style.display="none" //collapse last content div shown (it was set to "block")
setting.onChange(setting.prevpage, setting.currentpage)
var page=setting.contentdivs[turntopage-1]
if (setting.prevpage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)
this.css(setting.toclinks[setting.prevpage-1], "selected", "remove")
if (turntopage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)
this.css(setting.toclinks[turntopage-1], "selected", "add")
if (this.enablepersist)
this.setCookie("fcspersist"+setting.id, turntopage)

<div id="slider1" class="sliderwrapper">

<div class="contentdiv">
Content 1 Here. <br />
<p></p><a href="javascript:featuredcontentslider.jumpTo('slider1', 3)">Go to 3rd slide</a></p>

<div class="contentdiv" style="height:200px;" >
Content 2 Here.

<div class="contentdiv">
Content 3 Here.


<div id="paginate-slider1" class="pagination">


06-07-2011, 10:02 AM
Thanks, your code works like a charm even without defined height in html.

04-11-2012, 11:15 AM
Apologies for the bump - not sure whether new threading or bumping is worse here.
Many thanks to vwphillips for his code.

I have it working on a site I'm doing (domain hasn't propagated with dns server yet) except for the fact that I don't know how to make it size the div on the first go (i.e. I end up with a scroll bar on load).

To, perhaps, add to the difficulty I have the slider on multiple pages of the site though with different content on each page.

Any help would be much appreciated,


04-11-2012, 02:51 PM
with my modification

the parent div will resize on initialization

so long as the current div displayed has an explicit height

04-11-2012, 03:23 PM
Much obliged thank you very much.