Measure pixel width of a container?

[Tuxedo]

It is easy to get a monitor's width in pixels by 'screen.width' on IE and
other browsers, and 'document.width' can measure approximate browser widths
on non-IE browsers.

But is it also possible to get a value of a non-fixed width <div>, that may
for example be nested within another, also non-fixed width type of block,
such as a <div>, <table> or <p> etc.

<p>

<div id="myContent">

This doesn't get me close to any value on either Mozilla or IE. At least
not unless I set the div tag style="width:.. attribute beforehand, in which
case I won't need to find out the value in the first place.

</div>

</p>

<script>
var myDiv = document.getElementById("myContent");
var myWidth = myDiv.style.width;
</script>

Are there some other methods in Javascript to access the width properties
of these HTML objects before or after the page has been fully loaded?

 

[Terry]

It is easy to get a monitor's width in pixels by 'screen.width' on IE and
other browsers, and 'document.width' can measure approximate browser widths
on non-IE browsers.

But is it also possible to get a value of a non-fixed width <div>, that may
for example be nested within another, also non-fixed width type of block,
such as a <div>, <table> or <p> etc.

<p>

<div id="myContent">

This doesn't get me close to any value on either Mozilla or IE. At least
not unless I set the div tag style="width:.. attribute beforehand, in which
case I won't need to find out the value in the first place.

</div>

</p>

<script>
var myDiv = document.getElementById("myContent");
var myWidth = myDiv.style.width;
</script>

Are there some other methods in Javascript to access the width properties
of these HTML objects before or after the page has been fully loaded?

You can use document.getElementById("myContent").scrollWidth;

Terry

 

[Tuxedo]

Terry wrote:

[...]

You can use document.getElementById("myContent").scrollWidth;

Thanks, that works on the pixel! Tested on IE7 and Mozilla.

Does anyone know if scrollWidth also works in IE6?

 

[Thomas 'PointedEars' Lahn]

It is easy to get a monitor's width in pixels by 'screen.width' on IE and
other browsers, and 'document.width' can measure approximate browser widths
on non-IE browsers.

Utter nonsense.

Display resolution != desktop size != browser window size != viewport size.
[psf 3.7]

But is it also possible to get a value of a non-fixed width <div>, that may
for example be nested within another, also non-fixed width type of block,
such as a <div>, <table> or <p> etc.

Are there some other methods in Javascript to access the width properties
of these HTML objects before or after the page has been fully loaded?

After that, you are looking for the `offsetWidth' and `clientWidth'
properties, both proprietary though.


PointedEars

 

[Tuxedo]

Thomas 'PointedEars' Lahn wrote:

[...]

Utter nonsense.

Not quite. With monitor's with I'm not referring to the browser window, but
in fact the entire PC screen. Secondly, I was testing with document.width,
which does indeed return an approximate browser width, give or take margins.

[...]

After that, you are looking for the `offsetWidth' and `clientWidth'
properties, both proprietary though.

That's why I didn't find it documented, however, scrollWidth seems to work
OK the purpose of finding out the available width within a container block.

 

[Thomas 'PointedEars' Lahn]

Thomas 'PointedEars' Lahn wrote:
[...]

Utter nonsense.

Not quite. With monitor's with I'm not referring to the browser window, but
in fact the entire PC screen.

If you had not completely ignored and snipped the explanation along with
your statement which said why your statement deserved to be called utter
nonsense, you would have known.

You can not determine the width of the screen (in pixels). You can only
*maybe* determine the display resolution in pixels this way ("maybe",
because that object and property are proprietary, and do not need to
reflect the display resolution accurately). Provided that you could, given
additional attached toolbars, more than one screen, virtual desktops and
so on, the value that you can retrieve from screen.width (and screen.height)
is still utterly useless regarding design decisions, be they of a general
software-engineering or a graphical nature.

Incidentally, we had a this shortly ago:

<[email protected]>

Thanks to David Dorward for providing an English language version
of http://www.geocities.com/peace_cake.geo/img/fullscreen.htm

Secondly, I was testing with document.width, which does indeed return an
approximate browser width, give or take margins.

That is a proprietary property, too. And as you have observed, the value
it yields is approximate at best. Add the possibility of borders and
padding, that value is rendered to be of no value at all.


BTW: Your sender address marks you as not following the social principles
that Usenet was built on (and depends on), as the From header denotes a
mailbox, but one from which all e-mails are automatically removed a few
hours later; and you have not provided a Reply-To header. You should
change that.


PointedEars

 

[Tuxedo]

Thomas 'PointedEars' Lahn wrote:

[...]

I did not ignore the explanation but I did not necessarily agree with it.
Perhaps you jumped to conclusions a bit fast, calling it utter nonsense....

Also, I'm not so sure if virtual desktops has much to do with this, unless
of course users stretches a browser across multiple screens, like that
geocities image you posted. I don't see that happening in many real
scenarios, and even so, users do have some ability to adapt to design.

Please note that I have tested screen.width and document.width and found it
returned pixel values in respect to those specific properties, like it
would on most systems. Also, note that I used the word 'approximate' and I
never said the measures would necessarily be useful to base a design
decisions on, thus, I was searching for a more exact measure.

[...]

padding, that value is rendered to be of no value at all.

The level of usefulness surely depends on each particular situation, which
is beyond the scope of what is exactly discussed in this topic.

[...]

change that.

As you are probably aware, much spam results from news postings, and this
makes mailinator a useful tool. This has nothing to do with anti-social
behaviour and certainly nothing that could contest the free spirit of the
Usenet. Of course, the Usenet was built before the spam problem existed.

 

[Thomas 'PointedEars' Lahn]

Thomas 'PointedEars' Lahn wrote:

[...]

I did not ignore the explanation but I did not necessarily agree with it.

Whether you agree with what you have again destructively snipped here or not
does not matter. It is a fact, period. Ignore that at your own risk.

The level of usefulness surely depends on each particular situation, which
is beyond the scope of what is exactly discussed in this topic.

That is an interesting, yet completely meaningless statement in another
attempt to wind around the fact that your previous statements have been
rebutted.

[...]

change that.

I wrote "You should change that"; a recommendation, not a command. At the
latest here, one could easily get the impression that you are deliberately
destroying the context in your favor.

As you are probably aware, much spam results from news postings, and this
makes mailinator a useful tool.

There are other, much more useful tools, that don't impose a restriction on
proper communication.

This has nothing to do with anti-social behaviour and certainly nothing
that could contest the free spirit of the Usenet.

Yes, it does if a different Reply-To header is missing.

Of course, the Usenet was built before the spam problem existed.

And because of a few individuals who uphold that spirit, it still can offer
what it does despite the spam problem. Where off-topic discussions such as
this and general get-to-know can happen *in private*.

But, given your "style" of discussion, it appears unlikely that you are
willing to try to understand that. *PLONK*


PointedEars

 

[RobG]

Terry wrote:

[...]

You can use document.getElementById("myContent").scrollWidth;

Thanks, that works on the pixel! Tested on IE7 and Mozilla.

Does anyone know if scrollWidth also works in IE6?

Microsoft claim it works in IE 4 or greater.

I'll guess that you are already using the W3C specifications, so here
are some other useful references - I use the Gecko reference for most
things, only falling back to the MSDN one when all else fails:

Gecko DOM reference
<URL: http://developer.mozilla.org/en/docs/Gecko_DOM_Reference >

MSDN DHTML reference
<URL: http://msdn2.microsoft.com/en-us/library/ms533050.aspx >

 

[Tuxedo]

does not matter. It is a fact, period. Ignore that at your own risk.
yawn...

That is an interesting, yet completely meaningless statement in another

At least you acknowledge it is interesting, well done on your part.

destroying the context in your favor.

No deliberate attempt involved, just your negative thinking at play.

There are other, much more useful tools, that don't impose a restriction
on proper communication.

Perhaps you would like to elaborate on some, and while you're at it, come up
with a fix to the overall Internet spam problem.

But, given your "style" of discussion, it appears unlikely that you are
willing to try to understand that. *PLONK*

Your particular style of communication in this topic may in fact be
considered anti-social by some measures, in fact driving it off-topic.
Perhaps you had a bad day, and if so, I wish you a better day tomorrow.

 

[Tuxedo]

Terry wrote:

[...]

You can use document.getElementById("myContent").scrollWidth;

Thanks, that works on the pixel! Tested on IE7 and Mozilla.

Does anyone know if scrollWidth also works in IE6?

Microsoft claim it works in IE 4 or greater.

I'll guess that you are already using the W3C specifications, so here
are some other useful references - I use the Gecko reference for most
things, only falling back to the MSDN one when all else fails:

Gecko DOM reference
<URL: http://developer.mozilla.org/en/docs/Gecko_DOM_Reference >

MSDN DHTML reference
<URL: http://msdn2.microsoft.com/en-us/library/ms533050.aspx >

Thanks for the info. I found scrollWidth appears a bit buggy on Konqueror
3.4.3, so maybe the same or similar problem apply to Safari.