Results 1 to 10 of 10

Thread: Featured Content Slider v2.4 variable/liquid height?

  1. #1
    Join Date
    Dec 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Featured Content Slider v2.4 variable/liquid height?

    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

  2. #2
    Join Date
    Aug 2004
    Posts
    9,902
    Thanks
    3
    Thanked 967 Times in 955 Posts
    Blog Entries
    15

    Default

    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.
    DD Admin

  3. #3
    Join Date
    Jun 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Aug 2004
    Posts
    9,902
    Thanks
    3
    Thanked 967 Times in 955 Posts
    Blog Entries
    15

    Default

    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.
    DD Admin

  5. #5
    Join Date
    Jun 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.
    Last edited by kaalis; 06-07-2011 at 08:47 AM.

  6. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,807
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  7. The Following User Says Thank You to vwphillips For This Useful Post:

    kaalis (06-07-2011)

  8. #7
    Join Date
    Jun 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

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

  9. #8
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

  10. #9
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,807
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    with my modification

    the parent div will resize on initialization

    so long as the current div displayed has an explicit height
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  11. The Following User Says Thank You to vwphillips For This Useful Post:

    Citrusbytes (04-11-2012)

  12. #10
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Much obliged thank you very much.


    Cheers,

    Ell

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •