Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

FF "needs a moment" to calculate element width()

10 views
Skip to first unread message

David Balažic

unread,
Oct 17, 2009, 3:39:14 PM10/17/09
to
Hi!

I have some scripting foo where I add some element dynamically and the
want to query the width of it.

NOTE: The reason I want width is for centering. If anyone knows a way
to center a DIV element without knowing its width, just say so and the
below problem is irrelevant. (same goes for height and vertical
centering)

It is more or less like this:

$(top.document.body).append("<div id='TB_window'></div>");
// inject a LINK element into top.document for a CSS file
then append some stuff into TB_window,
// marker 1
then call $("#TB_window",top.document).width()


If I put an alert() at "marker 1" before the width() call, I get
different results than without.
It seems Firefox (v3.5.3) takes the opportunity while the alert is
displayed to compute
some stuff, which makes the width() result correct. If I don't use
alert(), then width()
returns s smaller value (about 30% less) than the real one.

Funny, in IE8 there is no such problem. There the correct width is
reported.

I use JQuery 1.3.2.

I put the entire code at http://pastie.org/658921

it is called from HTML by
a href="#"
onclick="tb_show('#TB_inline?
height=332&amp;width=590&amp;inlineId=lb_content&amp;modal=false',
(this.rel || false),'/stuff/css');return false;"
PopupboxNM /a (I removed brackets in case they give problems to mail/
web programs)


Regards,
David

Benjamin Smedberg

unread,
Oct 19, 2009, 9:16:29 AM10/19/09
to
On 10/17/09 3:39 PM, David Balažic wrote:

> NOTE: The reason I want width is for centering. If anyone knows a way
> to center a DIV element without knowing its width, just say so and the
> below problem is irrelevant. (same goes for height and vertical
> centering)

Vertical is hard, because the web doesn't lay out like that, but horizontal
is fairly easy, in any web engine that supports inline-block:

<head>
<style type="text/css">
.outside {
border: 1px solid red;
text-align: center;
}

.inside {
border: 1px solid blue;
display: inline-block;
}
</style>
<body>

<h1>Centering a DIV without knowing how large it will be</h1>

<p>To center a DIV without knowing how large it is (intrisic width), make
the div an inline-block inside of a containing block with text-align: center.

<div class="outside">
<div class="inside">
This block is small,<br>
but has multiple lines.
</div>
</div>

> It is more or less like this:
>
> $(top.document.body).append("<div id='TB_window'></div>");
> // inject a LINK element into top.document for a CSS file
> then append some stuff into TB_window,
> // marker 1
> then call $("#TB_window",top.document).width()

Loading style sheets is asynchronous, so assuming that the style sheet
modifies the layout in significant ways, I would certainly expect the width
to change after the stylesheet was loaded.

--BDS

0 new messages