(DOM)Compute the sum of width of elements contained in blockleve element

[Luke Matuszewski]

Hi.
I know that it is hard problem (as hard as CSS and HTML layouting rules
apply), but maybe someone
has some code or idea how to start it. For now i know i will cssQuery:

<URL:http://dean.edwards.name/my/cssQuery/>

My point of interest is all elements inside <div class="bodycontent">
[...] </div>, so to get direct descendant elements i will use:

var tags = cssQuery("div[class='bodycontent'] > *");

My question is about returned elements (which represent html tags) - do
they have some property which will indicate the actual width which they
take ?

BR.
Luke Matuszewski

[Zif]

Luke Matuszewski wrote:

Hi.
I know that it is hard problem (as hard as CSS and HTML layouting rules
apply), but maybe someone
has some code or idea how to start it. For now i know i will cssQuery:

<URL:http://dean.edwards.name/my/cssQuery/>

My point of interest is all elements inside <div class="bodycontent">
[...] </div>, so to get direct descendant elements i will use:

var tags = cssQuery("div[class='bodycontent'] > *");

My question is about returned elements (which represent html tags) - do
they have some property which will indicate the actual width which they
take ?
Elements don't represent tags anymore than a building represents the
plans that were used to build it. Anyhow, enough semantic crap :-)

You are looking for clientHeight and clientWidth, but beware - they
might not be constent across all browsers and you need to use a strict
doctype. The MozDev reference below also has links to the MS documentation:

MozDev:
<URL:http://developer.mozilla.org/en/docs/DOM:element.clientHeight>

Notes on compatibility:
<URL:http://www.quirksmode.org/viewport/compatibility.html>
You can get various style properties that have cascaded using
currentStyle (IE) and getComputedStyle (most others) but again,
implementations vary and support may be patchy:

<URL:
http://groups.google.co.uk/group/com...8c702286daf5c6

--
Zif

[Thomas 'PointedEars' Lahn]

Luke Matuszewski wrote:

My question is about returned elements (which represent html tags)
Elements do not represent HTML tags. HTML elements consist of tags (start
and end tag, where the latter or both may or may not be optional), and they
also may consist of content.

Accessing the DOM with an ECMAScript implementation returns references to
element objects which represent elements in the markup.
- do they have some property which will indicate the actual width which
they take ?

- getComputedStyle(objRef, pseudoElem).width
(standards compliant: Gecko, Opera)
- objRef.offsetWidth (proprietary: Gecko, IE, Opera)
- objRef.currentStyle.width (proprietary: IE)
PointedEars

[Thomas 'PointedEars' Lahn]

Zif wrote:

Luke Matuszewski wrote:

My question is about returned elements [...] do they have some
property which will indicate the actual width which they take ?

Elements don't represent tags anymore than a building represents the
plans that were used to build it. Anyhow, enough semantic crap :-)

You are looking for clientHeight and clientWidth, [...]

He is not:

,-[Gecko DOM Reference on .clientHeight]
| Returns the inner height of an element in pixels, including padding but
| not the horizontal scrollbar height, border, or margin.

,-[MSDN Library HTML and DHTML Reference on .clientHeight]
| Retrieves the height of the object including padding, but not including
| margin, border, or scroll bar.

,-[Gecko DOM Reference on .clientWidth]
| clientWidth is the inner width of an element in pixels. It includes
| padding but not the vertical scrollbar (if present, if rendered), border
| or margin.

,-[MSDN Library HTML and DHTML Reference on .clientWidth]
| Retrieves the width of the object including padding, but not including
| margin, border, or scroll bar.
PointedEars

[Thomas 'PointedEars' Lahn]

Thomas 'PointedEars' Lahn wrote:

Luke Matuszewski wrote:

My question is about returned elements [...] - do they have some property
which will indicate the actual width which they take ?

- getComputedStyle(objRef, pseudoElem).width
(standards compliant: Gecko, Opera)
[...]

That is not quite correct. getComputedStyle() as introduced in W3C DOM
Level 2 Style returns (a reference to) a CSSStyleDeclaration object which
does not have a `width' property nor does it have a namedItem() method to
allow for this property access in ECMAScript implementations. So the fully
standards compliant DOM access would be

getComputedStyle(objRef, pseudoElem).getPropertyValue("width")

which is supported only in the Gecko DOM (where the global Window object
appears to implement the ViewCSS interface). It should also be noted that
of all the DOMs tested, the KHTML DOM (Konqueror, Safari), Version 3.5.1
(Konqueror 3.5.1), does not appear to support any of the mentioned access
methods.
PointedEars

[Thomas 'PointedEars' Lahn]

Thomas 'PointedEars' Lahn wrote:

That is not quite correct. *getComputedStyle() as introduced in W3C DOM
Level 2 Style returns (a reference to) a CSSStyleDeclaration object which
does not have a `width' property nor does it have a namedItem() method to
allow for this property access in ECMAScript implementations. *So the
fully standards compliant DOM access would be

getComputedStyle(objRef, pseudoElem).getPropertyValue("width")

which is supported only in the Gecko DOM (where the global Window object
appears to implement the ViewCSS interface). It should also be noted that
of all the DOMs tested, the KHTML DOM (Konqueror, Safari), Version 3.5.1
(Konqueror 3.5.1), does not appear to support any of the mentioned access
methods.

My test case was flawed. Different to the `offsetWidth' property,
getComputedStyle() values are not (reliably) available in the Opera
and KHTML DOM before the document was fully loaded. When I appended
a text node with the retrieved value to the `body' element when its
`load' event fired, that text node contained the expected value.
So the support matrix is currently

Gecko IE Opera KHTML SC[0]
------------------------------------------------------------------ -----
getComputedStyle(objRef, [1], [2] - [4] [5] Yes
pseudoElem)
..getPropertyValue("width")

getComputedStyle(objRef, [1], [2] - [4] [5] Yes?
pseudoElem).width

objRef.offsetWidth [1], [2] 5.0+ [3] [4] [5] No

objRef.currentStyle.width - 5.0+ [3] - - No
------------------------------------------------------------------ -----

where objRef === document.body and pseudoElem === null.

It is Netscape 4.x --

Mozilla/4.8 [en] (X11; U; Linux 2.6.15.1-20060130.184242+0100 i686)

-- that supports neither access method mentioned.
PointedEars
___________
[0] Standards compliant; see quote for "Yes?"
[1] Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.12) Gecko/20060205
Debian/1.7.12-1.1
[2] Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8) Gecko/20060110
Debian/1.5.dfsg-4 Firefox/1.5 Mnenhy/0.7.3.0
[3] Cannot test here, version information from MSDN Library
[4] Opera/8.51 (X11; Linux i686; U; en)
[5] Mozilla/5.0 (compatible; Konqueror/3.5;
Linux 2.6.15.1-20060130.184242+0100; X11; i686; de, en_US)
KHTML/3.5.1 (like Gecko) (Debian package 4:3.5.1-1)

[Zif]

Thomas 'PointedEars' Lahn wrote:

Zif wrote:

Luke Matuszewski wrote:

My question is about returned elements [...] do they have some
property which will indicate the actual width which they take ?

Elements don't represent tags anymore than a building represents the
plans that were used to build it. Anyhow, enough semantic crap :-)

You are looking for clientHeight and clientWidth, [...]

He is not:

Maybe, maybe not - or can you read minds?

Maybe you only read to here then punched out a knee-jerk response - or
are you deliberately ignoring the reference to the documentation and
getComputedStyle/currentStyle methods?
--
Zif

[Thomas 'PointedEars' Lahn]

Zif wrote:

Thomas 'PointedEars' Lahn wrote:

Zif wrote:

Luke Matuszewski wrote:
My question is about returned elements [...] do they have some
property which will indicate the actual width which they take ?
Elements don't represent tags anymore than a building represents the
plans that were used to build it. Anyhow, enough semantic crap :-)

You are looking for clientHeight and clientWidth, [...] He is not:

Maybe, maybe not - or can you read minds?

He is definitely not, and one does not need to be able to read minds for
that, a minimum clue suffices. He asked about the actual width of the
element. As I pointed out, the client* properties do not provide that
kind of information as they do not take scrollbars, borders and margins
of the element into account. The offset* properties do, with more
consistent results among user agents and rendering modes.
Maybe you only read to here then punched out a knee-jerk response - or
are you deliberately ignoring the reference to the documentation and
getComputedStyle/currentStyle methods?

Maybe not.
PointedEars