animating div height when div has no height

[d4005]

I'd like to be able to animate the height of a div from it's current height, to that value plus 100 pixels (for example). You'd think that just getting the height like this:

document.getElementById("thediv").style.height

and incrementing it until you've added 100 would work nicely (taking into account parseInt and adding "px" of course).

I'm finding though that if a div was declared without specifying its height, then when you try and get it's current height, you get an empty string. Try this line in the address bar on this very page now:

javascript:alert(document.getElementById("navbar_search_menu").style.height)

That's one of the elements on this page and it has no height, so I couldn't animate it to make it bigger. Beware, when I previewed this post, there was a space (deliberately?) inserted between the s and earch of the element id.

[Shard]

If you know how high the div is to begin with, simply declare it first before your animation begins.

If the field is somehow dynamically loaded so you're not sure - but it contains text (even a space) there are a load of css related values that can be used to retrieve the height of the div (and then assign it back to the elementbyid).

I know it sounds like double handling but you only need to do it cause the height wasnt specified initially.

[d4005]

If the field is somehow dynamically loaded so you're not sure - but it contains text (even a space) there are a load of css related values that can be used to retrieve the height of the div (and then assign it back to the elementbyid). I know it sounds like double handling but you only need to do it cause the height wasnt specified initially.
Yeah that's how it is. I'm being given some random div and asked to expand it by X pixels and then later restore it. Right now I ask that I'm also given it's default height also. So a call to my func might be made like this:

divexpand("thediv",100,400); //expand "thediv" by 100 pixels, it's default is 400.

I could drop the 3rd parameter if I could somehow obtain the height and simply determine it, save it, and latest restore it. I figured, like you said, that there might be an incredibly convoluted way of figuring it out.

I hoped though to find a simple solution that I might be overlooking. When I look at the div properties of some of these bad divs from in visual studio, there's no property I can see that would help.

[Shard]

Can you paste a link to the page - even if its just the expandable bit and I'll write some javascript for you. Question though - wouldnt the new content automatically resize the div? or did you want it to animate its expansion and then fill out the content?

[d4005]

Can you paste a link to the page - even if its just the expandable bit and I'll write some javascript for you.Unfortunately I can't, it's a private library (like scriptaculous I suppose) that's obfuscated to within an inch of it's life so it wouldn't help much seeing it. Besides, I don't want you to be writing code. I'm just looking for that magical tip that I might be overlooking that somehow reveals the true height or width of a div that's otherwise returning a blank string or "auto".


Question though - wouldnt the new content automatically resize the div? or did you want it to animate its expansion and then fill out the content?Well this is where it gets tricky you see. There's this div (we call it a beacon div) that appears somewhere in the HTML. It might be anywhere. It might have stuff in it, or it might be completely empty. It's not under our control what's inside it, we just know the id of it and determine where it is. We don't want to change what's in this div, we just want to make it taller so that it pushes down whatever content is below it at certain times. The reason we want to do that, is because we have other divs that are floating and are positioned so that they align with the beacon div. They typically appear below it on demand and want to ensure that they're not obscuring what was previously below the beacon div (or being "attacked" by some form select element, wmode="window" flash object, iframe etc).

If there's no simple way of determining the real height of a div which is currently returning blank string or "auto" from it's style.height property, then I'll be happy to leave the code we have as it is - with the call to my function telling me what the height should be. In most cases the person who decided to make this call knows how big the div will be (even if it is set to auto), it's just the rare cases I'm trying to catch.

[Shard]

lol - love your humourious writing there dude.

ok - you do have a problem then. One solution is to use the innerHtml statement e.g. document.getElementById('beacon').innerHtml syntax - which automatically inserts the new html into the current DOM page order (pushes everything else down by filling up the div from the inside) or, and this is a wildshot, place a space ( ) into the empty div and then ask for the div's margin height - lol.

The best way to find out what attributes are available to you is to use Firefox's DOM Inspector to show you all the DOM accessible values for every element on the page - you'll usually find some wierd attribute that contains the height value. - lol

[d4005]

ok - you do have a problem then. Yup! It's one I've had a long time. I just found this forum and thought I might get a magic tip. Considering how much I'd googled the life out of it though, I wasn't expecting a magic solution but I thought it was worth a try.


One solution is to use the innerHtml statement e.g. document.getElementById('beacon').innerHtml syntax - which automatically inserts the new html into the current DOM page order (pushes everything else down by filling up the div from the inside) or, and this is a wildshot, place a space ( ) into the empty div and then ask for the div's margin height - lol.Yeah I'd considered that, but I really don't know what might be in this div. It should be empty but I can't rely on that. I have to really be careful not to break the page which "my stuff" is a guest on. I figure making the div larger than it is and then later restoring it is safe (and I've had no complaints yet, 10 billion page views down the road :)).


The best way to find out what attributes are available to you is to use Firefox's DOM Inspector to show you all the DOM accessible values for every element on the page - you'll usually find some wierd attribute that contains the height value. - lolYeah I've tried that, and also using quickwatch on the element in visual studio. There was no obvious attribute I could find.

[Shard]

Try googling the following element properties and see which ones are supported by both browsers ....

naturalHeight
offsetHeight
scrollHeight
clientHeight

All of these will return the height of a div, but arent supported by all browsers identically.
:-)

[d4005]

Try googling the following element properties and see which ones are supported by both browsers ....Nice one Shard!!!!! That did the trick !!!!

I created this div:


<div id='tt'><img height=100 width=50 src=""></div>

and ran a test on the standard document.getElementById('tt').style.height compared against those 4 properties you mentioned. Here are the results, as you can see the regular style.height returns an empty string, naturalHeight seems to only work on image objects (from my googling), clientHeight works only on Gecko, but scrollHeight and clientHeight work on both IE and Gecko :)


Win/IE6
div height using div's .style.height []
div height using div's .naturalHeight [undefined]
div height using div's .offsetHeight [100]
div height using div's .scrollHeight [100]
div height using div's .clientHeight [0]


Win/FireFox1.5
div height using div's .style.height []
div height using div's .naturalHeight [undefined]
div height using div's .offsetHeight [100]
div height using div's .scrollHeight [100]
div height using div's .clientHeight [100]