Issue With Animated Collapse And Dynamic Content

[MikeHunt]

1) Script Title: Animated Collapse

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.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

[ddadmin]

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:


<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.

[stu johns]

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