DIV height issues...

May 25, 2007 10:29 PM

Let's say I am using a JavaScript technique that requires a DIV to have a specified height, but the amount of text filling it, and thus the height it needs to be, will vary. Can I make it work?

I want to use this nifty trick to make DIVs slide out of nowhere containing comments on items in a list. The only problem is, it only seems to work if you specify the height of the DIV. The height of the DIVs will vary based on how many comments there are, and how long each one is. Is there any way to dynamically acquire the height the DIV would have if it were allowed to be as tall as necessary, and then set that? I'm using PHP, if that makes a difference...

posted by TunnelArmr to Computers & Internet (8 answers total)

Ok a couple of things. If the display of the div is set to block (it can be set to visibility = hidden) you can get the height via a variety of methods.

I like quirksmode for these kinds of answers.

PHP is server side and has no business in this conversation.

Third if you like this kind of thing you may want to just check out the Scriptaculous Effect Library built on top of prototype. It does the same thing and more.
posted by bitdamaged at 10:42 PM on May 25, 2007

Oh and depending on a few things you're looking for something like document.getElementById("mydiv").offsetHeight
posted by bitdamaged at 10:45 PM on May 25, 2007

Make your life easier by checking ot jquery. The code to do this regardless of div height would be:
$('#divID').hide();
$('#hrefID').click(function(){
$('#divID').slideDown();
});
posted by TungstenChef at 10:48 PM on May 25, 2007

Welcome to the wonderful world of scrollHeight.
posted by disillusioned at 11:47 PM on May 25, 2007

It's far to early for me to be functioning at full capacity, but would changing "overflow: hidden" to "overflow: auto" work?

There are 4 states of overflow.

- Visible, which means it keeps going, no matter how tall you told it to be.
- Hidden, which means the content will just end when at the specific height.
- Auto means that if the text overflows, the div will have a scrollbar on the right hand side, allowing the user to scroll to see the content that extends lower.
- Scroll, which will display the scroll bar no matter what.

Plus... here's something I was working on a while back based on another site that had the sliding tray thing. I don't believe I have a height set on anything in that. Don't quote me though... it's early.
posted by aristan at 2:35 AM on May 26, 2007

Thirding using a better tested JS framework for this. Check out MooTools. You shouldn't need a height then.
posted by mike_bling at 2:52 AM on May 26, 2007

Nthing JS framework. I've used jQuery and scriptaculous in the past, and both of them do this with flying colors.
posted by Deathalicious at 8:51 AM on May 26, 2007

Is there any way to dynamically acquire the height the DIV would have if it were allowed to be as tall as necessary, and then set that?

The quirksmode page on element attributes bitdamaged mentioned tells you how to pull the rendered height of the div -- offsetheight. I think you may have to let it render before you mess with it, though. If you don't want it to be visible during that process, you can set visibility: hidden on its style attributes, and that should let the browser figure out its dimensions without having it actually appear.

From that point, you can do whatever your normal trick is. Or use a cool javascript library. Just remember to set visibility back to visible right around when you start your slide-open sequence!
posted by weston at 2:37 PM on May 26, 2007