Ascertain needed div height to fit content?

B

Berko

I have a javascript that manipulates the DOM with content that will be
of variable heights. How can I ascertain how high my div needs to be in
order to show all content without scroll bars. Rather than just having
this happen automatically, I want the div to expand with a DHTML
animation. So, I need to know where to tell the script to stop
expanding. In pseudo-code:

function divAni(){
if(this.height > 0){
if(this.height > 0){
this.height = this.height - increment;
}
setTimeout(divAni,delay)
} else {
if(this.height < this.height.needed){
this.height = this.height + increment
}
setTimeout(divAni,delay);
}
}

I'm just not sure how to ascertain how tall the div needs to be for the
content to display.
 
A

Aaa aaa

Berko said:
I have a javascript that manipulates the DOM with content that will be
of variable heights. How can I ascertain how high my div needs to be in
order to show all content without scroll bars. Rather than just having
this happen automatically, I want the div to expand with a DHTML
animation. So, I need to know where to tell the script to stop
expanding. In pseudo-code:

function divAni(){
if(this.height > 0){
if(this.height > 0){
this.height = this.height - increment;
}
setTimeout(divAni,delay)
} else {
if(this.height < this.height.needed){
this.height = this.height + increment
}
setTimeout(divAni,delay);
}
}

I'm just not sure how to ascertain how tall the div needs to be for the
content to display.

style.height = 'auto';
 
B

Berko

Aaa said:
style.height = 'auto';

That would indeed work for general usage, but I want to animate the
div to display the content, i.e. I want to click on a div and then the
space under it will expand with animation to reveal the content. The
content is created via ajax calls to a web service.

Thanks for the response, but it's not exactly what I was looking for.
 
M

Matt Kruse

Berko said:
I'm just not sure how to ascertain how tall the div needs to be for
the content to display.

Load the content. Set visibility='hidden' and then display='block'.
Check the DIV's height.
Set the height to 0px and visibility=''
Now incrementally increase the div height until it matches the measured
height above.

For example, something like this:
http://mattkruse.com/temp/togglediv.html
 
B

Berko

Matt said:
Load the content. Set visibility='hidden' and then display='block'.
Check the DIV's height.
Set the height to 0px and visibility=''
Now incrementally increase the div height until it matches the measured
height above.

For example, something like this:
http://mattkruse.com/temp/togglediv.html

Thanks, Matt, this is exactly what I was looking to do!
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,754
Messages
2,569,527
Members
45,000
Latest member
MurrayKeync

Latest Threads

Top