Path: csiph.com!x330-a1.tempe.blueboxinc.net!usenet.pasdenom.info!weretis.net!feeder5.news.weretis.net!feeder1.news.weretis.net!news-peer.in.tum.de!news.belwue.de!newsfeed.arcor.de!newsspool3.arcor-online.net!news.arcor.de.POSTED!not-for-mail
Content-Type: text/plain; charset="UTF-8"
Message-ID: <1934317.nKmheAe9J7@PointedEars.de>
From: Thomas 'PointedEars' Lahn <PointedEars@web.de>
Reply-To: Thomas 'PointedEars' Lahn <cljs@PointedEars.de>
Organization: PointedEars Software (PES)
Date: Sun, 13 Nov 2011 18:35:02 +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
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>
Followup-To: comp.lang.javascript
MIME-Version: 1.0
Lines: 66
NNTP-Posting-Date: 13 Nov 2011 18:35:03 CET
NNTP-Posting-Host: da38b35d.newsspool4.arcor-online.net
X-Trace: DXC=lAZkI>A5Dkcf1oJaJ0@dmg4IUK<Cl32<a4Fo<]lROoRa8kF<OcfhCOkj]Fh:bfXX[mDZm8W4\YJNl;?f@h5gMfblBIlHSWN<J<oiT7Q2KB<J?g
X-Complaints-To: usenet-abuse@arcor.de
Xref: x330-a1.tempe.blueboxinc.net comp.lang.javascript:8285

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.
> 
> […]
> A better approach would be using scrollWidth and scrollHeight, but these
> properties are "buggy" in IE and Opera, according to
> <http://www.quirksmode.org/dom/w3c_cssom.html#elementview>. The irony
> here is that scrollWidth and scrollHeight were introduced by Microsoft
> in their MSIE's DHTML object model...
> 
> Therefore, if we want a "getInnerDimensions" function to return the
> correct dimensions for the element's content we will need to add the
> scrollTop and scrollLeft values to the clientHeight and clientWidth
> values respectively, otherwise we would not get the correct inner
> dimensions if the element is scrolled all the way down or to the right.
> 
> But what if the element doesn't have scrollbars? No problem, because
> scrollTop and scrollLeft will return zero.

And if I scroll down or right a scrollable element its content becomes 
higher/wider?
 
>>> Note: scrollWidth/scrollHeight are buggy in IE6-8 and Opera 10
>>>
>>> So, we'd need to compare (scrollTop + clientHeight) to scrollHeight too.
>>> In IE8, scrollWidth is 5 pixels off. See
>>> <http://www.quirksmode.org/dom/w3c_cssom.html>
>>
>> That states that *scrollHeight* is buggy in IE *5.5* to 7, and that
>> scrollWidth is _correct_ in those versions.  It also states that
>> scrollWidth
>> is 5 pixel off in IE 8, and that "Opera gives odd, incorrect values." 
>> Quite different from what you stated.
> 
> I don't think it is *quite* different, perhaps a *little* different...
> In fact, it is better to avoid scrollWidth/scrollHeight whenever we need
> a cross-browser code.

It is better to be aware of it and use *sensible* workarounds if necessary.  
This is actually one case where property inference (window.opera) is useful 
and acceptable; IE should be dealt with using Conditional Comments instead.


PointedEars
-- 
    realism:    HTML 4.01 Strict
    evangelism: XHTML 1.0 Strict
    madness:    XHTML 1.1 as application/xhtml+xml
                                                    -- Bjoern Hoehrmann