Featured Content Slider v2.4 variable/liquid height?

**bethebobber** · 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

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

**ddadmin** · 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:

Code:

.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%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

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

**kaalis** · 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?

Thanks.

**ddadmin** · 06-06-2011, 10:58 PM

Kaalis:
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.

**kaalis** · 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.

**vwphillips** · 06-07-2011, 09:46 AM

Code:

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
		return
	setting.currentpage=turntopage
	setting.contentdivs[turntopage-1].style.zIndex=++setting.topzindex
	this.cleartimer(setting, window["fcsfade"+setting.id])
	setting.cacheprevpage=setting.prevpage
	if (setting.enablefade[0]==true){
		setting.curopacity=0
		this.fadeup(setting)
	}
	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]
	page.style.visibility="visible"
	page.style.display="block"
    page.parentNode.style.height=page.offsetHeight+'px';
	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")
	setting.prevpage=turntopage
	if (this.enablepersist)
		this.setCookie("fcspersist"+setting.id, turntopage)
},

Code:

<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>

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

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

</div>

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

</div>

**kaalis** · 06-07-2011, 10:02 AM

Thanks, your code works like a charm even without defined height in html.

**Citrusbytes** · 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 94.23.242.219 (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,

Ell.