View Full Version : Animated Collapsible Div starts expanded on 1 page only

02-24-2008, 11:24 AM
1) Script Title: Animated Collapsible Div

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

3) Describe problem:

First of all, thank you for creating such awesome scripts and taking time to look at my problem. I am not sure if it is too complex and I understand if you are unable to look at it fully.

If you go to www.bestchildrensbooks.co.uk you will see I have incorporated the animated div into an oscommerce php shopping cart.

I have combined this with the Drop-Down Document Viewer
(http://www.dynamicdrive.com/dynamicindex3/dropdownview.htm) to enable me to include external sources which show a pretty cool page-turning catalog within an iFrame.

The animated collapsible div script is configured to start closed.

I have 2 problems.

1. Internet Explorer problem.

In IE, the scripts work perfectly with the content collapsed, until I get to the checkout payment page at which point it starts expanded. This is the only place this happens. The page is: http://www.bestchildrensbooks.co.uk/checkout_payment.php

I have looked through the forums but to be honest I can't see why this would happen and your help would be very greatly appreciated in helping me to fix this and to end up with a great website. Without this fix I will have to take out this functionality completely, which would be a real downer.

2. Firefox

Firefox only ever starts with the content expanded over the top of the html, which makes it unusable. Any thoughts?

Well, whatever the outcome of these issues, thank you again for making such fantastic scripts freely available to everyone.

02-25-2008, 10:47 PM
Regarding the IE issue, it actually appears collapsed initially as well for me on the problem page (http://www.bestchildrensbooks.co.uk/checkout_payment.php).

Regarding the FF issue, I did some testing, and the issue is apparently that IFRAME objects do not collapse accordingly when its parent DIV is being collapsed. One solution is to dynamically resize the IFRAME as well in FF. Try the below modified attached, and make sure near the top, that this line correctly references the ID of your IFRAME tag:


02-26-2008, 11:36 PM
Hi and thanks for the code change. I tried this and it makes the transition in Firefox look even smoother. Very cool indeed. Unfortunately, the original two problems remain - it still opens expanded in FF and the IE problem is still prevalent on the checkout_payment.php screen.

Do you have any further thoughts? My site go live is next Tuesday on World Book Day so I may have to strip out the code by then (as I bash my head right through the monitor cos I really want this to work). Any extra pointers very welcome. And thanks again.

02-27-2008, 01:05 AM
Regarding the FF issue, try the further tweaked animatedcollapse.js file below, which accounts for the page being run online (with the Flash content loading after the page has fully loaded already).

Regarding the IE issue, I'm still not seeing it. Are you saying when you use IE to visit this page (http://www.bestchildrensbooks.co.uk/checkout_payment.php), the DIV starts out expanded already? It starts out collapsed for me in IE7.

02-27-2008, 08:23 AM
Re the IE problem, sorry I wasn't clear about this.

if you start at www.bestchildrensbooks.co.uk then the div is correctly in a hidden state. As soon as you navigate to the checkout_payment.php page then it starts with the Div expanded rather than hidden, which it shouldn't as you want the webshop showing and not the contents of the div.

To get to the troublesome page you have to register as a user and then go through the first 2 stages of the checkout process (i.e. confirm delivery address then you get to payment confirmation which is where the problem is apparent)

I'm viewing using IE7 too.

Hope that helps clarify the problem.

02-27-2008, 08:38 AM
I loaded up the new code. Working sweet as pie now. That is awesome! Thank you so much for that.

02-27-2008, 09:40 PM
Hey I just spotted that IE is working after a fashion. It doesn't expand when it shouldnt anymore, but it has lost the content within the div totally, whereas it works fine with FF ??? It's enough to drive you nuts aint it?

02-27-2008, 10:50 PM
Hmm now I'm confused what the remaining issues are. lol BTW, it might help a lot if you can simplify things as much as possible. For example, do you have to use the Drop Down Content viewer script within the Animated DIV script, instead of just including regular content inside it instead?

02-27-2008, 11:19 PM
I'm confused too lol But thanks for sticking with me on this one!
I note your point about not having it too complex and to be honest I may simplify the whole drop down menu party I was intent on having. It was in there so that you could select different catalogues with different products in them as many of my customers have like 6 - 10 different catalogues up to 100 pages each. So the drop down was a pretty perfect solution. But hey, I'm starting to chill about it now. Mores the pity that my favourite browser (FF) works just great and IE doesn't.
I won't take up any more of your time on this, but I have to express my gratitude for your time and expertise - it is massively appreciated. Thank you.