Animated Collapse - please help

[bestresource]

1) Script Title: Animated Collapsible DIV

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

3) Describe problem:
I am using this script, and everything works fine. The problem is I need to use very tall divs (three per page, and each one 400px tall) that I need to render collapsible.

The problem I'm encountering as a result of using such tall div's is an esthetic one: when the page loads, it takes extra time and the visitor can see these big div's flash before them as the page loads. It looks quite ugly.

Anything I can do to optimize the visitor's experience? Please let me know if this question is clear enough. thanks

[jscheuer1]

Please post a link to the page on your site that contains the problematic script so we can check it out.

[Mr Moo]

I just fiddled with it a little bit, and have come up with the following:
1. In the style for the collapsing div add display:none;
2. Add the following code in the head section (or add it to your existing onload method)

<script type='text/javascript'>
window.onload = function() {
	document.getElementById("id_of_your_div").style.display = "block";
}
</script>

[bestresource]

I just fiddled with it a little bit, and have come up with the following:
1. In the style for the collapsing div add display:none;
2. Add the following code in the head section (or add it to your existing onload method)

<script type='text/javascript'>
window.onload = function() {
	document.getElementById("id_of_your_div").style.display = "block";
}
</script>

Mr. Moo, thanks so much! This solves the problem of the annoying "flicker" of the divs on page load.

However, since I have 4 different of these collapsible divs on a page, when I put in your window onload function, it makes it so that only ONE of these scripts functions on the page.

In other words, somehow this new funtion now makes it so that only one of these divs actually collapses, and comes open on click. The other three lie dormant... so maybe this is something with the page onload function?

I must confess I know almost nothing about javascript

[Mr Moo]

You simply need to repeat the line:

	document.getElementById("id_of_your_div").style.display = "block";

as many times as you need. So for example you might end up with:

<script type='text/javascript'>
window.onload = function() {
	document.getElementById("id_of_your_div1").style.display = "block";
	document.getElementById("id_of_your_div2").style.display = "block";
	document.getElementById("id_of_your_div3").style.display = "block";
	document.getElementById("id_of_your_div4").style.display = "block";
}
</script>

[bestresource]

Wow! talk about service...it all works perfectly now!

thanks so much Moo...you're a real asset here! this has made an incredible difference for my site!
thanks again...

mods: you might want to include this on your script download page, as this solves a real useability issue.

thanks again Moo!

[Mr Moo]

Heh, heh. Glad I could help.

That kind of thing really irritates me too. The thing is it doesn't make the web page any less usable, it just looks ugly.

I had a similar thing with a Google map that I integrated into a gallery in a dynamic pop up div. I found that if I hid (with display:none) the div initially (the way I wanted it) the map wouldn't load in it's entirety, but it looked hideous when it was displayed while loading. Eventually I ended up positioning the div containing the map 1000px above the top of the page (position:absolute;top:-1000px) it worked because it was hidden from view, but still "displayed". It just looks so much better now ;-)

[ddadmin]

The one pitfall of setting the DIVs to "display:none initially using CSS is that for people with JavaScript disabled, they won't be able to view these DIVs at all. It's an accessibility issue. There's another thread discussing this as well.

[Mr Moo]

That is true. In my example with the Google map of course, it is in fact better to hide the map initially: people without JavaScript wouldn't be able to use it anyway. In bestresource's case on the other hand this may not be the case. Sometimes you sacrifice a few users for the aesthetics of the rest.

Actually, a better way would be to have "Show My Stuff" links which by default open the content of the hidden div in a new window. Then write the onclick as onclick='collapse2.slideit(); return false;'. That way the users with JS get the nice slide effect, but those without can still use the site.

Lastly, do users with JS disabled actually exist? ;-)

[jscheuer1]

I would think that the preferred method of dealing with making the initial style display:none; in a javascript environment would be to have an external stylesheet with the desired styles on it and have the script in the head of the page write a link to it, or simply write it out.

Or, for those opposed to document.write, have an empty style link tag above the script and have the script set its href.