Determining Height of Dynamic Div Before it is Displayed

[alwaysfroosh]

I have designed a menu for my site that slides down from the top as the users mouse moves over the different categories in the menu bar. I have achieved this effect by changing the style.height property until the height of the div that contains the drop down reaches a preset maximum. This works well for now, but I now want to program it so that the user will only see options in the menu that they have permissions for, and therefore the height of the menu won't always be the same. The problem I have run into is that all of the menus start out hidden, so they do not have an offsetHeight until the browser displays them. The only thing I can think to do is make it so that when a user first gets to the site all of the menus are displayed to get the offsetHeight, then they immediately collapse. I don't really like this though, in my mind it's not as clean as having all the menus hidden until needed. Is there a better way to do this?

[Jesdisciple]

If no CSS is relevant to the image's height, you can use PHP (or another server language) to get it. And there's no need for AJAX; just echo it into the JS source to produce something like this, an array of associative arrays:

var images = [
    {src: 'image1.jpg', height: '10px'},
    {src: 'image2.jpg', height: '30px'}
];

The relevant PHP function is getimagesize.

[alwaysfroosh]

Thanks for the quick reply.

I'm not planning on using images in my menu, I was just going to use a table and format it with css. However, what I take from your suggestion is that I'm better off calculating what the height is going to be at the time my php script generates the content and populating that data into my javascript as opposed to trying to get the javascript to predict the required height. Is that correct?

[Jesdisciple]

Yup, that's it. I don't know of a way to do it directly with JavaScript. (The browser way is just a hack to get it done under the hood - probably by C or C++.)

[Jesdisciple]

I'm sorry, I didn't pay much attention to what you said in either of my posts... You can determine the height of some text based on the font size and face, but I don't know the specifics.

[ddadmin]

You can determine the true height of a DIV regardless of how much of it is actually exposed by first setting the DIV's CSS overflow to "scroll", then probing the property element.scrollHeight. For example:

<div id="test" style="background:red; height: 5px; overflow:scroll">
<p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
</div>

<script type="text/javascript">

var el=document.getElementById("test")
el.trueheight=el.scrollHeight
el.style.overflow="hidden"
alert(el.trueheight) //alerts 180 or so, true height of DIV

</script>

In the above, while the DIV's height has been explicitly set to 5px, you can still get its true height- content and all- but doing the above.

[zaphod42]

oooo this is where javascript gets fun! In my opinion the best way to achieve the effect you are looking for is to use the dropdown menu as a container....put other divs inside of it, each one a menu item....you can then set the height of the content "menu" to the size of the menu title, or whatever you mouseover to open it. if you set the overflow to hidden on the container and change the height of THAT dynamically, you never have to "hide" the menu items as you load them, they are set to display "block", but are hidden in the overflow of the container...so the offsetHeight and Width etc properties are still available even though you can't see them.

[alwaysfroosh]

You can determine the true height of a DIV regardless of how much of it is actually exposed by first setting the DIV's CSS overflow to "scroll", then probing the property element.scrollHeight. For example:

<div id="test" style="background:red; height: 5px; overflow:scroll">
<p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
</div>

<script type="text/javascript">

var el=document.getElementById("test")
el.trueheight=el.scrollHeight
el.style.overflow="hidden"
alert(el.trueheight) //alerts 180 or so, true height of DIV

</script>

In the above, while the DIV's height has been explicitly set to 5px, you can still get its true height- content and all- but doing the above.

Sorry it took me so long to reply, but thanks ddadmin, that was a great suggestion. Only problem with it is that originally all of my menu divs are set to display:none; and scrollHeight still doesn't report anything at this point.

So instead I set the height to 1px and then grab the scrollHeight property. Theoreticaly I suppose a line would appear for each menu as my page loads, but it happens so quickly I can't even notice it.

I tried setting the height to 0px and then grabbing the scrollHeight, but while it works in Firefox and Chrome, IE doesn't understand and displays the whole div.

Anyway, working now, and looking great.

[alwaysfroosh]

oooo this is where javascript gets fun! In my opinion the best way to achieve the effect you are looking for is to use the dropdown menu as a container....put other divs inside of it, each one a menu item....you can then set the height of the content "menu" to the size of the menu title, or whatever you mouseover to open it. if you set the overflow to hidden on the container and change the height of THAT dynamically, you never have to "hide" the menu items as you load them, they are set to display "block", but are hidden in the overflow of the container...so the offsetHeight and Width etc properties are still available even though you can't see them.

Thanks zaphod42, that's a good idea. I've used that technique before for a marquee effect on divs sliding horizontally. I've already designed all the animation around what we've discussed above, but your idea would work perfectly too. Thanks!