By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,575 Members | 1,395 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,575 IT Pros & Developers. It's quick & easy.

Ascertain needed div height to fit content?

P: n/a
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.

Jun 24 '06 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Berko wrote:
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';
Jun 25 '06 #2

P: n/a

Aaa aaa wrote:
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.

Jun 25 '06 #3

P: n/a
Berko wrote:
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

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com
Jun 26 '06 #4

P: n/a

Matt Kruse wrote:
Berko wrote:
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

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com


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

Jun 26 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.