Path: csiph.com!x330-a1.tempe.blueboxinc.net!usenet.pasdenom.info!gegeweb.42!gegeweb.eu!nntpfeed.proxad.net!proxad.net!feeder2-2.proxad.net!newsfeed.arcor.de!newsspool1.arcor-online.net!news.arcor.de.POSTED!not-for-mail
Content-Type: text/plain; charset="UTF-8"
Message-ID: <3001316.SPkdTlGXAF@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 12:40:21 +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> <1934317.nKmheAe9J7@PointedEars.de> <j9pln6$6bc$1@speranza.aioe.org>
Followup-To: comp.lang.javascript
MIME-Version: 1.0
Lines: 107
NNTP-Posting-Date: 14 Nov 2011 12:40:22 CET
NNTP-Posting-Host: 44167917.newsspool3.arcor-online.net
X-Trace: DXC=ni:iXIGYLCQ<<0iRN7DLEQMcF=Q^Z^V3X4Fo<]lROoRQ8kF<OcfhCO[Q^kYTE\6d>QDZm8W4\YJN\;?f@h5gMfb\Y[TTlf5:kjS>Ek;UH:X`VW
X-Complaints-To: usenet-abuse@arcor.de
Xref: x330-a1.tempe.blueboxinc.net comp.lang.javascript:8307

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.
>>>
>>> […]
>>> 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?
> 
> No, but you can't retrieve the width / height of a scrollable element's
> content with just clientHeight and clientWidth properties.

(Apparently I have to be blunt.)  Difficulties with using scrollWidth and 
scrollHeight /notwithstanding/:

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:

Not scrolled

       scrollLeft
         ->.<-
           .
           .   scrollWidth
           .<------------------>.
           .                    .
           . clientWidth        .
           .<----------->.      .                  |
           .             .      .                  v
           ,---------------.- --.- - - - - - - - - - scrollTop
           |             |^|    :  ^               ^
           |             |#|    :  | clientHeight  |
           |             | |    :  v               |
           |_____________|v| _ _:_ _               | scrollHeight
           |<#          >| |    :                  |
           :---------------'    :                  |
           :                    :                  |
           :                    :                  v
           '-- -- -- -- -- -- --'- - - - - - - - - -

Scrolled right and down

   scrollLeft
  ->.      .<-
    .      .
    .-- -- -- -- -- -- --.- - - - - - - - - - - - --
    :      .             :        ^                ^
    :      .             :        | scrollTop      |
    :      .             :        v                |
    :      ,---------------.- - - -                | scrollHeight
    :      |             |^|      ^                |
    :      |             | |      | clientHeight   |
    :      |             |#|      v                v
    :__ __ |_____________|v|_ _ _ _ _ _ _ _ _ _ _ __
    '      |<          #>| |
    '      '---------------'
    '      '             '
    '      '             '
    '      '             '
    '      '<----------->'
    '        clientWidth '
    '                    '
    '<------------------>'
         scrollWidth


See also: <http://msdn.microsoft.com/en-us/library/ms530302(VS.85).aspx>


PointedEars
-- 
Danny Goodman's books are out of date and teach practices that are
positively harmful for cross-browser scripting.
 -- Richard Cornford, cljs, <cife6q$253$1$8300dec7@news.demon.co.uk> (2004)