I am using jQuery to build a DOM element dynamically, for example this:



Then through the code, things are appended to the "container" div and the HTML element, respectively, gets larger. Or should. It does contain more and more markup which takes more room to display, but while we're building it, as you can see, the element is hidden (that ".hide()" call at the end) -- so we only display it after it's all built.

My question is, why does:



return 0? Also, .width() returns 0 as well. Even after displaying it, it returns 0. How can I get the height and width of this element before it is displayed? I need to know so that I can center it on the screen as we display it.

Thanks for any help, this has been driving me mad.

How do you plan on centering it? Not using margin: 0 auto?

Hm, figured it out...

Anyway here's what was going on. I can't center it using margin: 0 auto because it's position is fixed, and this has to be this way because it's an overlay, like a "dialog box" that appears on top of everything else.

The point is that as we built this element dynamically, turns out that to get its dimensions we had to inject it into the DOM first, but this displayed it, so we had to use CSS to turn the visibility to hidden. After that, we injected it, got its dimensions using .width() and .height() like above, then "un-injected it" until we needed it later.