Results 1 to 3 of 3

Thread: Animate Collapsible DIV CSS Problem

  1. #1
    Join Date
    May 2005
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Animate Collapsible DIV CSS Problem

    1) Script Title: Animate Collapsible DIV

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

    3) Describe problem:

    Hi guys,

    I'm creating a new website at the moment, completely CSS design, which basically is in two columns. When puting the above script on my page it's fine in every browser except for Firefox! With the script on the page it pulls the right column content down below the left column.

    I've tried to figure out how to fix it but I'm really stuck What I have realised is that it's irrelevant what I call the DIV's or the content in them, and it's nothing to do with my CSS. The problem is with the Javascript...and through process of elimination found (I think) out it has something to do with line 6 in the Javascript:

    function animatedcollapse(divId, animatetime, persistexpand, initstate)

    Can someone please help?!?! The page I'm struggling with is http://www.ordinarygirl.co.uk/gallery/ The picture you can see should be on the right!!

    Thanks in advance,
    Matt
    Last edited by matt blank; 07-23-2007 at 09:32 AM.

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

    Default

    I'm fairly certain the problem is actually with the CSS you're using to create the 2 columns layout, that there are some wrinkles causing the issue in Firefox. But this seems to solve the problem for now. Inside collapse.js, find the following block of code (2 lines):

    Code:
    if (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes") //Hide DIV (unless div should be expanded by default, OR persistence is enabled and this DIV should be expanded)
    this.divObj.style.visibility="hidden" //hide content (versus collapse) until we can get its height
    and remove them. It seems as soon as you set the collapsing div to either "visibility: hidden" or "display: none", you get the problem you're describing.

    BTW, please note that your page is currently in violation of our usage terms, since the credit notice doesn't appear inline on the page. Please reinstate the credit notice:

  3. #3
    Join Date
    May 2005
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the response! I've actually decided that the script wasn't right for the page anyway, design wise But I've kept what you've said incase I ever need to use it in the future!

    Many thanks (and I will make sure I put the credit there in future!)
    Matt

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
  •