Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]


Groups > comp.lang.javascript > #8202 > unrolled thread

David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions

Started byDavid Mark <dmark.cinsoft@gmail.com>
First post2011-11-10 06:09 -0800
Last post2011-12-02 18:04 -0800
Articles 5 on this page of 65 — 16 participants

Back to article view | Back to comp.lang.javascript


Contents

  David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-11-10 06:09 -0800
    Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions "J.R." <groups_jr-1@yahoo.com.br> - 2011-11-10 16:57 -0200
      Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-11-10 11:54 -0800
    Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions "Ant" <not@home.today> - 2011-11-10 19:47 +0000
      Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-11-10 13:07 -0800
      Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Matt McDonald <matt@fortybelow.ca> - 2011-11-10 14:12 -0700
        Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-11-11 07:26 -0800
        Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 -   How to Measure Element Dimensions Frobernik <nospam@nospam.com> - 2011-11-17 22:43 +0000
          Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-02 16:08 -0800
            Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How   to Measure Element Dimensions Frobernik <nospam@nospam.com> - 2011-12-06 21:18 +0000
              Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-06 14:13 -0800
      Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Gene Wirchenko <genew@ocis.net> - 2011-11-10 13:17 -0800
      Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions "Evertjan." <exjxw.hannivoort@interxnl.net> - 2011-11-10 22:43 +0000
      Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions "Richard Cornford" <Richard@litotes.demon.co.uk> - 2011-11-11 00:36 +0000
        Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Gene Wirchenko <genew@ocis.net> - 2011-11-10 19:14 -0800
          Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions "Richard Cornford" <Richard@litotes.demon.co.uk> - 2011-11-11 09:59 +0000
            Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Gene Wirchenko <genew@ocis.net> - 2011-11-11 11:04 -0800
          Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Hans-Georg Michna <hans-georgNoEmailPlease@michna.com> - 2011-11-11 14:39 +0100
        Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Hans-Georg Michna <hans-georgNoEmailPlease@michna.com> - 2011-11-12 10:38 +0100
          Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions "Richard Cornford" <Richard@litotes.demon.co.uk> - 2011-11-12 19:19 +0000
            Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Eric Bednarz <bednarz@fahr-zur-hoelle.org> - 2011-11-12 21:07 +0100
              Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2011-11-13 00:42 +0100
              Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions "Richard Cornford" <Richard@litotes.demon.co.uk> - 2011-11-13 14:33 +0000
                Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Eric Bednarz <bednarz@fahr-zur-hoelle.org> - 2011-11-17 23:14 +0100
                  Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions "Richard Cornford" <Richard@litotes.demon.co.uk> - 2011-11-17 23:55 +0000
            Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Hans-Georg Michna <hans-georgNoEmailPlease@michna.com> - 2011-11-13 20:22 +0100
          Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions RobG <rgqld@iinet.net.au> - 2011-11-13 08:29 +1000
            Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Hans-Georg Michna <hans-georgNoEmailPlease@michna.com> - 2011-11-13 20:25 +0100
              Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions RobG <rgqld@iinet.net.au> - 2011-11-13 23:05 -0800
                Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Tim Down <timdown@gmail.com> - 2011-11-14 03:41 -0800
                  Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions RobG <rgqld@iinet.net.au> - 2011-11-16 16:18 -0800
                  Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-02 16:03 -0800
                Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Hans-Georg Michna <hans-georgNoEmailPlease@michna.com> - 2011-11-15 16:52 +0100
                Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-02 15:54 -0800
          Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2011-11-13 10:38 +0200
    Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Dr J R Stockton <reply1145@merlyn.demon.co.uk> - 2011-11-11 21:33 +0000
      Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-02 15:00 -0800
      Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-02 18:38 -0800
        Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions "J.R." <groups_jr-1@yahoo.com.br> - 2011-12-03 19:50 -0200
          Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-03 15:50 -0800
          Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-03 16:38 -0800
            Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-03 17:14 -0800
              Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Hans-Georg Michna <hans-georgNoEmailPlease@michna.com> - 2011-12-04 11:07 +0100
                Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-04 02:45 -0800
            Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-04 13:37 -0800
              Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-04 16:01 -0800
                Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-04 16:28 -0800
                  Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-04 18:56 -0800
                    Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions John G Harris <john@nospam.demon.co.uk> - 2011-12-05 14:39 +0000
                      Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-05 11:00 -0800
          Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-03 19:17 -0800
    Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions "J.R." <groups_jr-1@yahoo.com.br> - 2011-11-13 00:06 -0200
      Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2011-11-13 04:31 +0100
        Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions "J.R." <groups_jr-1@yahoo.com.br> - 2011-11-13 13:44 -0200
          Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2011-11-13 18:35 +0100
            Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions "J.R." <groups_jr-1@yahoo.com.br> - 2011-11-13 22:00 -0200
              Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2011-11-14 12:40 +0100
                Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions "J.R." <groups_jr-1@yahoo.com.br> - 2011-11-14 11:52 -0200
                  Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2011-11-14 15:40 +0100
            Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Eric Bednarz <bednarz@fahr-zur-hoelle.org> - 2011-11-17 11:16 +0100
              Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2011-11-17 21:06 +0100
                Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions Eric Bednarz <bednarz@fahr-zur-hoelle.org> - 2011-11-17 22:13 +0100
          Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-02 15:19 -0800
      Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-02 15:10 -0800
        Re: David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions David Mark <dmark.cinsoft@gmail.com> - 2011-12-02 18:04 -0800

Page 4 of 4 — ← Prev page 1 2 3 [4]


#8392

FromThomas 'PointedEars' Lahn <PointedEars@web.de>
Date2011-11-17 21:06 +0100
Message-ID<3001757.SPkdTlGXAF@PointedEars.de>
In reply to#8386
Eric Bednarz wrote:

> Thomas 'PointedEars' Lahn <PointedEars@web.de> writes:
>> This is actually one case where property inference (window.opera) is
>> useful and acceptable; […]
> 
> var opera = 'Der Ring des Nibelungen';

Don't be ridiculous.  Oh wait, it's you.

> On the other hand, Opera has a proper way of dealing with
> (version-)detection (unless the opera object is shadowed, and I’d rather
> have a false negative than a false positive; but surely YMWD), e.g.:
> 
> var OPERA = (function (global) {
>     var dom_window = global.window,

AISB.

>         opera,
>         version,
>         subversion,
>         build;
>     if ('object' == typeof dom_window.opera) {

You have overlooked the case of dom_window.opera === null.  Also, it is a 
host object, so all bets (other than it would have to be a true-value to be 
useful) are off.

>         opera = dom_window.opera;
>         // the version method was introduced in Opera 8
>         if (('function' == typeof opera.version) &&
>             ('function' == typeof opera.buildNumber)

You have overlooked the case where a host object's method would not yield 
`function', which might be the case with Opera's DOM implementation.


PointedEars
-- 
When all you know is jQuery, every problem looks $(olvable).

[toc] | [prev] | [next] | [standalone]


#8393

FromEric Bednarz <bednarz@fahr-zur-hoelle.org>
Date2011-11-17 22:13 +0100
Message-ID<m2y5ve310r.fsf@nntp.bednarz.nl>
In reply to#8392
Thomas 'PointedEars' Lahn <PointedEars@web.de> writes:

> Eric Bednarz wrote:
>
>> Thomas 'PointedEars' Lahn <PointedEars@web.de> writes:
>>> This is actually one case where property inference (window.opera) is
>>> useful and acceptable; […]
>> 
>> var opera = 'Der Ring des Nibelungen';
>
> Don't be ridiculous.

That reminds me. You know what Wagner said after deciding to write his
magnus opus around Wotan’s world dominance plot instead of yours?

“Score adjusted.”

> Oh wait, it's you.

Says the one who is constantly beating reality with a big hammer until
it fits into his views.

>>     if ('object' == typeof dom_window.opera) {
>
> You have overlooked the case of dom_window.opera === null.

That’s a fair point.

> Also, it is a 
> host object, so all bets (other than it would have to be a true-value to be 
> useful) are off.

Cases where it isn’t Opera’s host object are not really interesting.

>>         opera = dom_window.opera;
>>         // the version method was introduced in Opera 8
>>         if (('function' == typeof opera.version) &&
>>             ('function' == typeof opera.buildNumber)
>
> You have overlooked the case where a host object's method would not yield 
> `function', which might be the case with Opera's DOM implementation.

See above. The only thing I have overlooked is the case where it is
pointless to reply.

[toc] | [prev] | [next] | [standalone]


#8792

FromDavid Mark <dmark.cinsoft@gmail.com>
Date2011-12-02 15:19 -0800
Message-ID<e4292a59-4d33-46a9-813e-7395fb1ba540@o5g2000yqa.googlegroups.com>
In reply to#8283
On Nov 13, 10:44 am, "J.R." <groups_j...@yahoo.com.br> wrote:
> On 13/11/2011 01:31, 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.
>
> The clientWidth and clientHeight properties return the width and height
> of the content field, excluding borders and *scrollbars* (when visible),
> but including padding. If the element's content overflows then the
> browser might show scrollbars depending on the overflow CSS property. In
> the latter case, clientWidth and clientHeight won't retrieve the
> measurement of the hidden parts of the element's content.


No problem there; overflowed content not supposed to count.

>
> 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>.

No. That's getScrollDimensions. And may well be susceptible to quirks
in some cases. Particularly the HTML element.

The irony
> here is that scrollWidth and scrollHeight were introduced by Microsoft
> in their MSIE's DHTML object model...

As were others. IE 4.


>
> 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.


No.


>
> But what if the element doesn't have scrollbars? No problem, because
> scrollTop and scrollLeft will return zero.
>
> >> 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.
>
> --
> Joao Rodrigues (J.R.)

[toc] | [prev] | [next] | [standalone]


#8787

FromDavid Mark <dmark.cinsoft@gmail.com>
Date2011-12-02 15:10 -0800
Message-ID<7b451c85-862d-4a5b-b246-2d320f94a635@v5g2000yqn.googlegroups.com>
In reply to#8274
On Nov 12, 9:06 pm, "J.R." <groups_j...@yahoo.com.br> 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];


I don't follow. Use for what?

>
> 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>

Not buggy, at least not in contexts I use. Who uses scrollWidth? And
thanks, but I am not interested PPK's notes on subject. Usually vague
and/or confused.


>
> --
> Joao Rodrigues (J.R.)

[toc] | [prev] | [next] | [standalone]


#8793

FromDavid Mark <dmark.cinsoft@gmail.com>
Date2011-12-02 18:04 -0800
Message-ID<fafb0681-1849-4b99-9ec8-23d0422b836a@n10g2000vbg.googlegroups.com>
In reply to#8787
On Dec 2, 6:10 pm, David Mark <dmark.cins...@gmail.com> wrote:
> On Nov 12, 9:06 pm, "J.R." <groups_j...@yahoo.com.br> 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];
>
> I don't follow. Use for what?
>
>
>
> > 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>
>
> Not buggy, at least not in contexts I use. Who uses scrollWidth? And
> thanks, but I am not interested PPK's notes on subject. Usually vague
> and/or confused.
>

Should amend and sorry for quoting sig.  Was on phone browser.  Glad
to get out without losing the message in a crash. :(

Can think of one recent case where I compared scrollWidth to
clientWidth; it was the usual case of expanding an overflow:auto
container to exactly fit the width of the content.  Had no problems
whatsoever; tested in almost every version of IE, as well as several
versions of the usual standards-based suspects.  From time frame, it
seems to me that Opera 10 would have been on that list.  But I know
there weren't issues with IE in my context.  Version 8 was primary IE
browser at the time and tested back to 5.5 in IETester or some such.

It wouldn't shock me if in some version in some rendering mode (e.g.
quirks) or some compatibility mode of IE, and with some particular
styling and structure, there is a bug with the scrollWidth property.
But AFAIK, it never bit me.  :)

ISTM that the "drag and scroll" example on the Build Test page would
be a good place to start to determine if IE 8 or Opera 10's
implementation of scrollWidth/Height is off in some way.  If they are
off, there's no way that example will work properly (unless it just
happens to avoid the bugs by coincidence of particular styling or
other variables).

And if there are such quirks with those properties, they should be
trivial to feature test. ;)

[toc] | [prev] | [standalone]


Page 4 of 4 — ← Prev page 1 2 3 [4]

Back to top | Article view | comp.lang.javascript


csiph-web