Results 1 to 4 of 4

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

  1. #1
    Join Date
    Aug 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

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

    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

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

    Default

    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()
    DD Admin

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

    tobsen02 (08-20-2008)

  4. #3
    Join Date
    Aug 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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!

  5. #4
    Join Date
    Oct 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

    Cheers!

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
  •