Path: csiph.com!x330-a1.tempe.blueboxinc.net!usenet.pasdenom.info!weretis.net!feeder4.news.weretis.net!news.mixmin.net!news2.arglkargh.de!noris.net!newsfeed.arcor.de!newsspool3.arcor-online.net!news.arcor.de.POSTED!not-for-mail
Content-Type: text/plain; charset="UTF-8"
Message-ID: <1669332.aK4W3vaeNJ@PointedEars.de>
From: Thomas 'PointedEars' Lahn <PointedEars@web.de>
Reply-To: Thomas 'PointedEars' Lahn <cljs@PointedEars.de>
Organization: PointedEars Software (PES)
Date: Mon, 14 Nov 2011 15:40:11 +0100
User-Agent: KNode/4.4.11
Content-Transfer-Encoding: 8Bit
Subject: Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions
Newsgroups: comp.lang.javascript
Followup-To: comp.lang.javascript
References: <bd12b66f-33f5-43d2-8e22-6f81b42c3d8b@n14g2000vbn.googlegroups.com> <j9n8nq$81o$1@speranza.aioe.org> <1529063.40VBb9nUPl@PointedEars.de> <j9oolo$lhi$1@speranza.aioe.org> <1934317.nKmheAe9J7@PointedEars.de> <j9pln6$6bc$1@speranza.aioe.org> <3001316.SPkdTlGXAF@PointedEars.de> <j9r6fa$2h2$1@speranza.aioe.org>
Supersedes: <1934127.nKmheAe9J7@PointedEars.de>
MIME-Version: 1.0
Lines: 61
NNTP-Posting-Date: 14 Nov 2011 15:40:11 CET
NNTP-Posting-Host: c4b3025a.newsspool3.arcor-online.net
X-Trace: DXC=48:S@fLGECa;iVb[J9ZZP`McF=Q^Z^V3h4Fo<]lROoRa8kF<OcfhCOk9aNUc68?K]hDZm8W4\YJNl;?f@h5gMfbl>@dMN77i@Ha6TL2]gB@i3b
X-Complaints-To: usenet-abuse@arcor.de
Xref: x330-a1.tempe.blueboxinc.net comp.lang.javascript:8317

J.R. wrote:

> On 14/11/2011 09:40, Thomas 'PointedEars' Lahn wrote:
>> J.R. wrote:
>>> Thomas 'PointedEars' Lahn wrote:
>>>> J.R. wrote:
>>>>> Thomas 'PointedEars' Lahn wrote:
>>>>>> J.R. wrote:
>>>>>>> On 10/11/2011 12:09, David Mark wrote:
>>>>>>>> if (document.documentElement&&     typeof
>>>>>>>> document.documentElement.clientWidth == 'number') {
>>>>>>>>       var getInnerDimensions = function(el) {
>>>>>>>>         return [el.clientHeight, el.clientWidth];
>>>>>>>>       };
>>>>>>>> }
>>>>>>>
>>>>>>> Considering an element having scrollbars, we might use:
>>>>>>>
>>>>>>>       return [el.scrollTop + el.clientHeight,
>>>>>>>               el.scrollLeft + el.clientWidth];
>>>>>>
>>>>>> Please explain what the scroll position has to do with the element
>>>>>> dimensions.
>> […]
>> Your approach is *junk*.  Because *again*, the *content* of the element
>> (scrollWidth/scrollHeight) does _not_ become wider or higher when I
>> scroll it right or down, so you MUST NOT add scrollTop or scrollLeft:
>>
>> [ASCII-Art: Element measures without and with scrolling]
>> 
>> See also:<http://msdn.microsoft.com/en-us/library/ms530302(VS.85).aspx>
> 
> You really don't seem to understand that a part of the content of a
> scrollable element may be hidden because it's wider and/or taller than
> the element's box.

No, *I* really do.  And −1 for full-quoting and still failing to understand 
what took me quite some time to get painted right:

  scrollWidth  != clientWidth + scrollLeft
  scrollHeight != clientHeight + scrollTop

> And that invisible part of the content cannot be
> measured with just element.clientHeight and element.clientWidth
> properties. If you want to get the element's content dimensions (not the
> box dimensions), you MUST USE (el.scrollTop + el.clientHeight) and
> (el.scrollLeft + el.clientWidth).

No, you MUST NOT use that because *inner dimensions* (i. e., that of the 
element's *content*) computed this way will vary depending on the element's 
scroll position, which is not measuring the inner dimensions *at all*.


Score adjusted

PointedEars
-- 
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee