PDA

View Full Version : Animated Collapse - please help



bestresource
09-01-2007, 04:22 AM
1) Script Title: Animated Collapsible DIV

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.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
09-01-2007, 05:12 AM
Please post a link to the page on your site that contains the problematic script so we can check it out.

Mr Moo
09-01-2007, 05:14 AM
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
09-01-2007, 06:57 AM
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
09-01-2007, 07:21 AM
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
09-01-2007, 07:59 AM
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
09-01-2007, 08:25 AM
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
09-01-2007, 09:17 AM
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 (http://www.dynamicdrive.com/forums/showthread.php?p=103886) discussing this as well.

Mr Moo
09-01-2007, 10:19 AM
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
09-01-2007, 01:59 PM
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.

bestresource
09-02-2007, 04:41 AM
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 ;-)

hi there, I took a closer look, and the hidden divs do indeed not show on page load...so it is big improvement.
However, I noticed that there is still a "jog" of the space that the divs use up when opened, that they show up on page load. In other words, the div's don't show on pageload, but there is extra space where the divs actually are place do show up on pageload.

Based on what you said above, though maybe I should try positioning the divs I am opening up with this script absolutely, so that they are way down on the page on loading, so that they dont' show up.

I am not very experienced with css...can you give me a little pointer on how this works? how would I do this? thanks... I tried just pasting in the code you gave above (position:absolute;top:-1000px) but that just made the script not work for some reason...