Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Animated Collapse - please help

  1. #1
    Join Date
    Aug 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Animated Collapse - please help

    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

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

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

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

  3. #3
    Join Date
    Aug 2007
    Location
    Somewhere in the vicinity of Betelgeuse
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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)
    Code:
    <script type='text/javascript'>
    window.onload = function() {
    	document.getElementById("id_of_your_div").style.display = "block";
    }
    </script>

  4. #4
    Join Date
    Aug 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Mr Moo View Post
    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)
    Code:
    <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

  5. #5
    Join Date
    Aug 2007
    Location
    Somewhere in the vicinity of Betelgeuse
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    You simply need to repeat the line:
    Code:
    	document.getElementById("id_of_your_div").style.display = "block";
    as many times as you need. So for example you might end up with:
    Code:
    <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>

  6. #6
    Join Date
    Aug 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

  7. #7
    Join Date
    Aug 2007
    Location
    Somewhere in the vicinity of Betelgeuse
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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 ;-)

  8. #8
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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.

  9. #9
    Join Date
    Aug 2007
    Location
    Somewhere in the vicinity of Betelgeuse
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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? ;-)

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

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

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

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
  •