Animated Collapse DIV sometimes doesn't work-expand

**thaidatelink** · 10-02-2008, 03:49 AM

1) Script Title: Animated Collapsible DIV v2.01

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

3) Describe problem: the script doesn't work-expand sometimes after page load

4) Script Residing on: http://www.thaidatelink.com/page/matchmaking/

Hi,

I have about 50 Divs using Animated Collapse on a single page.

8 Main divs and 41 Secondary-level Divs inside the Main Divs.

After the page load, sometimes all would work well, sometimes all the Main Divs couldn't expand, sometimes some of the Main Divs couldn't expand, and sometimes all the Main Divs couldn't expand at all.

Tested on (OS: Windows XP Pro) - IE6, IE7, Firefox, Safari, opera.

The problem occurs on all browser tested above, but the problem happens more often on IE.

This page is quite heavily coded, therefore, could the page load be the cause of the problem?

Is it because I have too many Divs using Animated Collapse?

Hope someone could point out the problem, as I've spent quite some time to get this page together and if I were to change to another Show-Hide Div script, it'll require a lot of work.

Just a thought, how/is it possible to add a windows.onload.initxxx() to make sure the script was fully loaded and excutable before making the page active?

Thanks in advanced.

Tommy

**ddadmin** · 10-02-2008, 08:19 AM

You can try modifying the behavior of the script so it's initialized when the page has fully loaded. Inside the .js file, find the line:

Code:

jQuery(document).ready(function($){

and change that to:

Code:

jQuery(window).bind('load', function($){

**thaidatelink** · 10-02-2008, 10:22 AM

Hi DD Admin,

Thanks for your reply

I did the modifications as you instructed and it's now showing 'Error' when the page load.

I did a debug using Firefox and the 'Error' report shows:

$ is not a function
this.$divref=$('#'+this.id)

By the way, I did a more intensive test on all browsers and came to the conclusion that the problem only occurs on IE6 & IE7.

Worked beautifully with Firefox, Opera, Safari (before the modification).

**thaidatelink** · 10-02-2008, 03:49 PM

Hi,

The problem resolved.

Initially, I used an onclick event attached to an element to call for another javascript function to execute the "javascript:animatedcollapse.toggle('name_of_div')" function.

The reason I did that was because I need to execute a few functions at the same time hence I call for a javascript function to execute multiple functions.

Anyway, I've now attached the "javascript:animatedcollapse.toggle('name_of_div')" functions directly to the element and that seems to have solved the problem on IE.

Last, I wish to say a BIG 'THANK YOU' for such a wonderful scripts.

Tommy

**ddadmin** · 10-03-2008, 01:22 AM

Don't know why you'd get the error with the modification I posted, but either way I guess it's mute. Glad you've fixed the problem.

**thaidatelink** · 10-03-2008, 10:40 AM

Hi,

I think I was too happy too soon

The problem still persist on IE6 & IE7.

When the page loads on Firefox, Safari & Opera, the Divs will each show up one at a time in sequence (look like it's initiating the scripts) and it works fine on these browsers.

When the page loads on IE6 & IE7, ALL the Divs appeared All At Once (looks like it wasn't initiating the necessary scripts while loading the Divs) and very often the Divs won't be able to expand.

Another thing I notice is that after I've cleared the cache on IE6 & IE7, and on my first visit to the page, the scripts works fine most of the time (well...more success than failures...but the frequency of the problems occuring is still a need to worry). But on the second visit onwards back to the page would mostly encounter the problem again.

To: DD Admin,

I think the 'Error' which occurs due to your suggested modification is probably because I didn't append the "javascript:animatedcollapse.toggle('div_name')" to an "<a href=""></a>" and I've appended it to an "onclick" event instead.

Example:

Instead of this -
<a href="javascript:animatedcollapse.toggle('div_name')" > Show - Hide</a>

I did this -
onclick="javascript:animatedcollapse.toggle('div_name')"

Because I've attached the event to a form element (checkbox & radio button).

So (just a guess), with your suggested modification, it couldn't init/var the "<a href="javascript:animatedcollapse.toggle('div_name')" ></a>" on the page because it's looking out for "<a href=""></a> to validate against the "animatedcollapse.addDiv('div_name')".

Well, any suggestion which I may have another try before...well...I don't know what else I can do

Advice appreciated.

Thanks in advanced.

Tommy

**ddadmin** · 10-04-2008, 06:39 AM

Hmmm yep, you should only use the prefix "javascript:" when calling animatedcollapse.toggle() directly inside the "href" attribute of a link. Any other time, it must simply be:

Code:

animatedcollapse.toggle('div_name')

Regarding the issue at large though, I'll have to check it again when I'm back on my home PC on Sunday.

**thaidatelink** · 10-04-2008, 07:46 AM

Hi again DD Admin,

Thanks for going that extra mile to help

Very much appreciated

At the mean time, I'll also try to see if I could solve the problem myself.

Thank you!

Tommy

**thaidatelink** · 10-04-2008, 09:13 AM

Hi DD Admin,

This info might help to shed some light on what the problem is.

I can now confirmed that the problem only occurs when the page was revisited on IE6 & IE7.

I have tried numerous times by first clearing the browser cache before visiting the page, and it works fine everytime.

Then I tried numerous times to revisit the same page without clearing the browser cache and EVERYTIME that I've tried so far encountered the problem.

Other than IE6 & IE7, it worked fine on Firefox, Safari & Opera.

Hope that knowing the problem would produce a solution :P

**ddadmin** · 10-06-2008, 12:06 AM

I still haven't quite isolated the problem yet, as apparently saving your page offline no longer runs the script for me in IE. But try the following two suggestions:

1) Replace the line:

Code:

jQuery(document).ready(function($){

inside animatedcollapse.js with the below instead:

Code:

jQuery(window).bind('load', function(){
 var $=jQuery

This is actually the proper way to initialize the script when the page loads. There was an error with the first version I posted above.

2) I noticed you're using jquery1.2.6. Try updating to the latest version, jquery1.2.6 instead: http://docs.jquery.com/Downloading_jQuery