Animated Collapsible Div ("Multiple" Instances)

[Medyman]

1) Script Title: Animated Collapsible Div

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

3) Describe problem:
Hey guys,

Here's the problem. I'm just putting the finishing touches on a site that has a bit of stylesheet switching going on. I'm using the technique described here (http://www.themaninblue.com/writing/perspective/2006/01/19/) (and shown here (http://www.themaninblue.com/experiment/ResolutionLayout/)) to switch the stylesheet based on screen resolution.

In larger resolutions (1000px + viewport), I show a sidebar with an instance of the animated div. In smaller resolutions (<1000px), I get rid of the sidebar and show a "topbar" with an instance of the animated div.

On their own, everything works fine. If on initial pageload the browser is 1000+, the sidebar instance works perfectly. Same with the topbar when the initial pageload happens when the browser is <1000px.

The issue occurs when I resize the browser. According to the resolution-dependent stylesheet script, my stylesheets switch when the conditions are met. There are only 2 stylesheets (one w/ sidebar, one 2/ topbar). The the conditions are met, they switch back and forth. Meaning there is only one instance of the collapsible div visible at a time.

Now, what happens is the instance that was visible at initial pageload is the only one that works. I assume this is because the other element wasn't being displayed (i.e. display:none). I can't use visibility here because it would throw off the alignment.

So, the question (finally, I know) is...
Is there some function I should call within the page resize script that will initiate the animated div script?

[ddadmin]

You can initiate the animated div script on demand, by calling the default initialization code:


new animatedcollapse("dog", 1000, false)

on demand, such as within your resize resolution script. That's fairly simple, but the real challenge is the fact that your DIVs are initially hidden using display:none. This is fine only if those same DIVs also have an explicit CSS "height" attribute declared within it, so the script knows in advanced how tall the DIV it's animating is. Without a height attribute declared, the script normally tries to dynamically determine a DIV's height when the page first loads, which will return 0 in this case, as your DIVs are completely hidden by default, furthermore, the initialization code is called dynamically after the page has already loaded.

To see what I mean, I've modified the default 1st example on the DD script page to be activated dynamically, after clicking on a link beneath it:


<p><b>Example 1:</b></p>

<a href="javascript:collapse1.slidedown()">Slide Down</a> || <a href="javascript:collapse1.slideup()">Slide Up</a>
<div id="dog" style="width: 300px; height: 150px; display: none; background-color: #99E0FB;">

<!--Your DIV content as follows -->
<h3>Content inside DIV!</h3>
<h4>Note: CSS height attribute defined</h4>

</div>


<p><a href='#' onClick='document.getElementById("dog").style.display="block"; collapse1=new animatedcollapse("dog", 1000, false); return false'>Activate Effect</a></p>

Notice how you also need to first set the DIV's display back to "block" before actually initializing the Animated DIV script. This works, although if you remove the "height: 150px" declaration from within the DIV, it longer does.

[Medyman]

Awesome! Will give it a try.

Thanks ddadmin :D