Animated Collapsible DIV v2.01 - Problem if site not loaded completely

**tobsen02** · 08-18-2008, 07:58 PM

1) Script Title: Animated Collapsible DIV v2.01

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

3) Describe problem:
First of all thanks for the script, the animation is just what I've been looking for.

The script works quite fine if a website is loaded completely, but I included in in a web-application to show a status-window of background-tests, which run for quite a while.The main site keeps loading until all tests have been finished.

During the website is not loaded completely, the script doesn't work. I tried to debug the problem as good as I could.
The addDiv:function is getting loaded and divid is present within the function. Also within showhide:function the divid is present, but all variables of this.divholders[divid].$divref are missing (null). As already mentioned, the script works after the load of the site is aborted or finished, so it seems to me, that this.divholders[divid].$divref is only available after a the website is loaded completely.

Since I did not get more information on the web about this.divholders[divid].$divref, I hope someone here is able to explain this behavior.

The following code snippet shows the problem quite good I guess (copied together from my source, since the app is not public. sleep() of cource is a substitute for the running tests).
Click the show/hide during sleep and nothing hapens. Wait sleep to be finished or abort the loading and it works.

PHP Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

"http://www.w3.org/TR/html4/loose.dtd">



<html><head><title>poc</title>

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

<script type="text/javascript" src="animatedcollapse.js"></script>

<script type="text/javascript">

    animatedcollapse.addDiv('test')

    animatedcollapse.init()

</script>

</head>

<body>                    

<a href="javascript:animatedcollapse.toggle('test')">show/hide Status</a>

<div id="test" style="width: 400px; background: #FFFFFF; display:none">

<iframe src="somesite.html" height="100" width="400" scrolling="no" frameborder="0" marginheight="0" marginwidth="0"></iframe>

</div>

<?php @flush(); @ob_flush(); sleep(60); ?>

</body>

</html>

Thanks in advance

tobsen02

**ddadmin** · 08-20-2008, 03:37 AM

By default the script is initialized when the textual contents of the page has all loaded, which is different/ faster than when the entire page has loaded (which includes images etc). I suspect the contents of your IFRAME is what's holding the script back from initializing for whatever reason. Luckily, since your IFRAME contains an explicit height, the script shouldn't have to wait for its contents to load before running, so try changing Animated Collapsible Script to just run at the end of the page. Firstly, you'll need to move the config code on your HTML page from the HEAD to the end of the page:

Code:

<script type="text/javascript">
    animatedcollapse.addDiv('test')
    animatedcollapse.init()
</script> 
</body>

Then, inside the .js file, find the below line:

Code:

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

and change that to:

Code:

var $=jQuery
	//jQuery(document).ready(function($){

and also, comment out the below line in the file as well:

Code:

//}) //end doc.ready()

**tobsen02** · 08-20-2008, 07:58 AM

First of all, thanks for your reply and the workaround.

After I changed the js as described, I placed the script initialisation right after the div, I want to fade in/out, but before the sleep(). Like this, it works out great.

Again, thanks for your help!

**darrylc** · 10-29-2008, 04:38 PM

Awesome, thanks guys, I had this exact same problem, your solution is working perfectly!

Cheers!

Thread: Animated Collapsible DIV v2.01 - Problem if site not loaded completely

Thread Tools

Search Thread

Animated Collapsible DIV v2.01 - Problem if site not loaded completely

The Following User Says Thank You to ddadmin For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions