Results 1 to 3 of 3

Thread: Issue With Animated Collapse And Dynamic Content

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

    Default Issue With Animated Collapse And Dynamic Content

    1) Script Title: Animated Collapse

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

    3) Describe problem:

    I am using a series of collapsible divs to display data via an AJAX. When the user first clicks on the div, it expands and a loading progress bar is shown. The data is retrieved, and when the request is complete I replace the loading progress bar in the div with the retrieved content (using innerHTML in JS). I have the div set at 175px tall (an average size for the dynamic content), and if the content coming back is larger, I adjust the height. This works 75% of the time.

    The issue is if the html is much larger than 175px, let's say 400px. When the content comes, back the panel only expands to about 75% of the content's height, leaving the rest cut off. I've debugged this thing like crazy, only to come up with no real solution. The weird thing is if I force the request to take an extra second before returning the data, the div always expands to the full height of the content. Very strange.

    Any ideas on how to approach this?

    Thanks,
    Mike
    Last edited by ddadmin; 08-28-2007 at 11:40 PM.

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

    Default

    If you change the DIV content that's being animated on the fly, not only should you change the height of the DIV accordingly, but also the contentheight property for that animated instance. The later is what the script refers to to tell how tall the DIV is. With that in mind, here's a little demo:

    Code:
    <a href="javascript:collapse1.slidedown()">Slide Down</a> || <a href="javascript:collapse1.slideup()">Slide Up</a>
    <div id="dog" style="width: 300px; height: 110px; background-color: #99E0FB;">
    
    <!--Your DIV content as follows -->
    <h3>Content inside DIV!</h3>
    <h4>Note: CSS height attribute defined</h4>
    
    </div>
    
    <script type="text/javascript">
    
    //Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
    var collapse1=new animatedcollapse("dog", 1000, false)
    
    function test(){
    document.getElementById('dog').innerHTML='<p>d<p>d<p>d<p>d<p>d<p>d<p>d<p>d<p>d'
    document.getElementById('dog').style.height="500px"
    collapse1.contentheight=500
    return false
    }
    
    </script>
    
    <a href="#" onClick="test()">Change content</a>
    Note the 2 lines in red.

  3. #3
    Join Date
    Feb 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    in the example is it possible to programatically create reference to the collapse1 in order to set the contentheight, I tried to do a document.getElementById('collapse1').contentheight in my callback function but it didnt work.
    Any ideas if this is possible, or how to achieve it?

    thanks

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
  •