Results 1 to 3 of 3

Thread: Animated Collapsible DIV - accounting for hidden content

  1. #1
    Join Date
    Jan 2008
    Thanked 0 Times in 0 Posts

    Default Animated Collapsible DIV - accounting for hidden content

    1) Script Title: Animated Collapsible DIV

    2) Script URL (on DD):

    3) Describe problem:
    First, thanks for the great script.
    Sorry no example URL as working on intranet site.
    Main problem is we have various display:none elements within our collapsible div. These can change state to be visible using user action.
    The animated div container then is not large enough to contain this content.
    We were thinking that maybe we could re-calculate the various heights when an element becomes available and then reload the script.
    Or possibly allow somehow for the height of all hidden objects on window.load

    Any pointers on how to/best way address this problem would be appreciated.

    All the best

  2. #2
    Join Date
    Dec 2007
    Ankara, Turkey
    Thanked 2 Times in 2 Posts


    Have you tried using the offsetHeight or scrollHeight properties of the DIV's?

  3. #3
    Join Date
    Mar 2005
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries


    Or possibly allow somehow for the height of all hidden objects on window.load
    If you mean window.onload, the script already does this. If you change the content dynamically after the page loads, that can result in problems, or if you set the height for the div (an option), and set it incorrectly, this overrides the script calculating the height for you. Also, if there simply isn't enough room in your layout around the dynamic content, this could also be a problem.

    From the demo page:

    Considerations when defining your DIV

    This script will work on both DIVs with an explicit CSS "height" attributed defined, and those without. For example:

    <!--DIV with height defined -->
    <div id="dog" style="width: 300px; height: 110px;"></div>
    <!--DIV without height defined-->
    <div id="cat" style="width: 300px;"></div>
    The advantage of a DIV with a height attribute explicitly defined is that the user can expand/contract the DIV almost immediately, instead of after the document has fully loaded (when the script can dynamically get its height). Of course, in real life, you often cannot set the DIV's height in advanced for various reasons, and this script will still work in these cases.

    Another thing to take note is if you wish to add padding/margins to the DIV- you'll need to do it inside another DIV contained within it instead, for example:

    <div id="cat" style="width: 300px;">
    <div style="padding: 0 5px">
    Some content
    In other words, the "padding: 0 5px" declaration shouldn't be added inside the starting DIV itself, but within it. The reason for this limitation is that padding and margins will throw off certain calculations within the script.
    - John

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


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts