PDA

View Full Version : Ultimate fade-in needs refresh in Accordion Content



dianagard
09-02-2011, 03:53 AM
1) Script Title: Ultimate Fade-in Slide Show & Accordion Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm & http://www.dynamicdrive.com/dynamicindex17/ddaccordion.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.

azoomer
09-02-2011, 02:50 PM
Post a link to the page you are working on. That would make it easier to understand the problem.

jscheuer1
09-02-2011, 03:51 PM
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/dynamicindex17/ddaccordion_suppliment2.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.

dianagard
09-02-2011, 08:43 PM
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

jscheuer1
09-03-2011, 05:47 AM
OK, add the onopenclose function code as shown to the accordion init:


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


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


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


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


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

dianagard
09-03-2011, 08:04 AM
That did the trick! Plus, it gave me some good programming lessons. Much obliged.

Diana