Results 1 to 6 of 6

Thread: Ultimate fade-in needs refresh in Accordion Content

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

    Default Ultimate fade-in needs refresh in Accordion Content

    1) Script Title: Ultimate Fade-in Slide Show & Accordion Content

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm & http://www.dynamicdrive.com/dynamici...daccordion.htm

    3) Describe problem: When opening an accordion div, the slide show is there, but the description is not. When I refresh the page, the description shows up, but I must do this each time I open a different DIV. I am testing this on the latest Firefox with a MAC.

  2. #2
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    Post a link to the page you are working on. That would make it easier to understand the problem.

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    The browser and the OS shouldn't matter for this. It's an age old if little understood problem. When a script initializes, if it's display is none, many cannot calculate all of the dimensions they need to.

    That's what's happening here. The accordion makes whatever you don't see right away display none before it ever gets written to the page. The slideshow is one of these scripts that has to be display block in order to initialize properly.

    We could work something out on that score. But it might get complicated because if you have a lot of slideshows, and they all initialize properly during page load, it might take a long time for them all to load up. Thus making the page take a long time to load up.

    So ideally we would want each slide show to only init when and if revealed for the first time. To do that, we could use accordion's onopenclose function. If you like you can see the information on that here:

    http://www.dynamicdrive.com/dynamici...uppliment2.htm

    It's a bit down the page as the oninit function is covered first.

    But to really work it out for the page you're talking about would take time and would be much easier if I could see the page.

    So if you want more help:

    Please post a link to a page on your site that contains the problematic code so we can check it out.
    Last edited by jscheuer1; 09-02-2011 at 04:55 PM. Reason: English Usage
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Aug 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    The site is not complete yet, but here's the page in question:

    http://www.sacredapproach.com/session.php

    There are only two of these that are using both accordion and the slideshow: On The Table and Your Pet.

    Thanks in advance...

    Diana

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    OK, add the onopenclose function code as shown to the accordion init:

    Code:
    <script type="text/javascript">
    
    //Initialize sessions accordion:
    ddaccordion.init({
    	headerclass: "sessions", //Shared CSS class name of headers group
    	contentclass: "thesession", //Shared CSS class name of contents group
    	revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
    	mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
    	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
    	defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
    	onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
    	animatedefault: false, //Should contents open by default be animated into view?
    	persiststate: true, //persist state of opened contents within browser session?
    	toggleclass: ["", "opensession"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    	togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
    	animatespeed: "slow", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
    	oninit:function(expandedindices){ //custom code to run when headers have initalized
    		//do nothing
    	},
    	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
    		//upon first time opening, initialize slideshow if present
    		var ss;
    		if((ss = header.getAttribute('data-slideshow')) && state === 'block'){
    			header.removeAttribute('data-slideshow');
    			new fadeSlideShow(slideshows[ss]);
    		}
    	}
    })
    </script>
    Replace the slideshow inits:

    Code:
    <script type="text/javascript">
    
    //Initialize the slideshows
    
    var ssint=new fadeSlideShow({
    	wrapperid: "ssinterview", //ID of blank DIV on page to house Slideshow
    	dimensions: [380, 380], //width/heig . . .
    
    
     . . . displaymode: {type:'auto', pause:3000, cycles:0, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: "always",
    	togglerid: "ssdogtoggler"
    })
    </script>
    with:

    Code:
    <script type="text/javascript">
    
    //Options for the slideshows
    var slideshows = {
    	ssint: {wrapperid: "ssinterview", //ID of blank DIV on page to house Slideshow
    		dimensions: [380, 380], //width/height of gallery in pixels. Should reflect dimensions of largest image
    		imagearray: [
    			["images/interview1.jpg","","","In most cases I will ask you to fill out a short intake form, then we will discuss the issues that brought you to the session."],
    			["images/interview5.jpg","","","This intake process serves a few purposes.  First, it gets us comfortable with each other. Then it helps us document your current state of wellness so we can compare it to how you feel after this and future sessions.  Next, it helps your body to further consider and commit to releasing problems and enhancing what's working."],
    			["images/interview4.jpg","","","Finally, it gives me as your practitioner an opportunity to align with you energetically and observe your physical, mental and emotional states so I can support and assist you in moving to a higher state of wellness "]
    		],
    		displaymode: {type:'manual', pause:500, cycles:0, wraparound:false},
    		persist: false, //remember last viewed slide and recall within same session?
    		fadeduration: 500, //transition duration (milliseconds)
    		descreveal: "always",
    		togglerid: "ssinttoggler"
    	},
    
    	sstab: {wrapperid: "sstable", //ID of blank DIV on page to house Slideshow
    		dimensions: [380, 380], //width/height of gallery in pixels. Should reflect dimensions of largest image
    		imagearray: [
    			["images/session3.jpg","","","I start by scanning your body using intuitive techniques and what I've learned about you through our intake."],
    			["images/session7.jpg","","","Then I find the places in your body that need focus and attention in priority order."],
    			["images/hands1.jpg","","","As I create a picture of what needs to be attended to I check in with your body by 'muscle checking', wherein I pull gently on your hand looking for a yes or no response. "],
    			["images/session6.jpg","","","Once I've determined all the connections that need to be made, I'll tap gently on your head..."],
    			["images/session4.jpg","","","and heart to set these connections."],
    			["images/session9.jpg","","","At this point, the session could be complete, or I will go on to find more connections and tap those in as well."]
    		],
    		displaymode: {type:'manual', pause:500, cycles:0, wraparound:false},
    		persist: false, //remember last viewed slide and recall within same session?
    		fadeduration: 500, //transition duration (milliseconds)
    		descreveal: "always",
    		togglerid: "sstabtoggler"
    	},
    
    	ssdog: {wrapperid: "ssdog", //ID of blank DIV on page to house Slideshow
    		dimensions: [380, 380], //width/height of gallery in pixels. Should reflect dimensions of largest image
    		imagearray: [
    			["images/dogsession6.jpg"],
    			["images/dogsession7.jpg"],
    			["images/dogsession3.jpg"],
    			["images/dogsession8.jpg"]
    		],
    		displaymode: {type:'auto', pause:3000, cycles:0, wraparound:false},
    		persist: false, //remember last viewed slide and recall within same session?
    		fadeduration: 500, //transition duration (milliseconds)
    		descreveal: "always",
    		togglerid: "ssdogtoggler"
    	}
    };
    </script>
    Add this stylesheet to the page, or add its rules to an existing stylesheet for the page:

    Code:
    <style type="text/css">
    #ssinterview, #sstable, #ssdog {
    	width: 380px;
    	height: 380px;
    }
    </style>
    It reserves space in the layout for each slideshow. Since they're all set to 380x380 in their options, I did them all together. If you end up with different dimensions for one or more shows, you may break these out individually. It's just ordinary css specifying their width and height.

    Give each accordion header that corresponds to content with a slideshow a data-slideshow attribute that names that slideshow, example:

    Code:
    	<h3 class="sessions" data-slideshow="ssint">Intake</h3>
    	<div class="thesession">
              <div id="ssinterview"></div>
    	    <div id="ssinttoggler" style="width:400px; text-align:center; margin-top:10px">
    			<a href="#" class="prev"><img src="images/leftbutton.png" style="border-width:0" /></a>
    			<span class="status" style="margin:0 50px; font-weight:bold"></span>
    
    			<a href="#" class="next"><img src="images/rightbutton.png" style="border-width:0" /></a>
    	    </div>
    
    	</div>
    That's it, any questions, feel free to ask.
    Last edited by jscheuer1; 09-03-2011 at 05:57 AM. Reason: flesh out explanation of style
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    dianagard (09-03-2011)

  7. #6
    Join Date
    Aug 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    That did the trick! Plus, it gave me some good programming lessons. Much obliged.

    Diana

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
  •