Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How toMeasure Element Dimensions

Reply
Thread Tools

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

 
 
Hans-Georg Michna
Guest
Posts: n/a
 
      11-13-2011
On Sat, 12 Nov 2011 19:19:45 -0000, Richard Cornford wrote:

><scr("|')\+("|')ipt lang:javascript
>
>- of which a representative example (from an old dojo version, and
>re-wrapped for posting) is:-
>
>document.write(
> "<scr"+"ipt type='text/javascript' src='"+tmps[x]+"'></scr"+"ipt>"
>);


Thanks again! Nice examples.

Hans-Georg
 
Reply With Quote
 
 
 
 
Hans-Georg Michna
Guest
Posts: n/a
 
      11-13-2011
On Sun, 13 Nov 2011 08:29:54 +1000, RobG wrote:

>On 12/11/11 7:38 PM, Hans-Georg Michna wrote:


>>[...]
>> Anyway, do you have more examples? These would be good demos of
>> the general ignorance towards correct JavaScript programming.
>> Good for demos.


>One that is specific to jQuery is the use, usually within a listener, of
>the expression:
>
> $(this).val()
>
>Searching at Google code search with:
>
> \$\(this\)\.val\(\) lang:javascript
>
>returns over 5,000 hits.


Please help my vague memories of jQuery. What is it that .val()
does? Or do you mean that the $(...) is simply superfluous?

Hans-Georg
 
Reply With Quote
 
 
 
 
J.R.
Guest
Posts: n/a
 
      11-14-2011
On 13/11/2011 15:35, 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.


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


ACK.

--
Joao Rodrigues (J.R.)
 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      11-14-2011
On Nov 14, 5:25*am, Hans-Georg Michna <hans-
(E-Mail Removed)> wrote:
> On Sun, 13 Nov 2011 08:29:54 +1000, RobG wrote:
> >On 12/11/11 7:38 PM, Hans-Georg Michna wrote:
> >>[...]
> >> Anyway, do you have more examples? These would be good demos of
> >> the general ignorance towards correct JavaScript programming.
> >> Good for demos.

> >One that is specific to jQuery is the use, usually within a listener, of
> >the expression:

>
> > * $(this).val()

>
> >Searching at Google code search with:

>
> > * \$\(this\)\.val\(\) lang:javascript

>
> >returns over 5,000 hits.

>
> Please help my vague memories of jQuery. What is it that .val()
> does? Or do you mean that the $(...) is simply superfluous?


It can be replaced with the very much faster (and less to type):

this.value;

$(this) "wraps" the target in a jQuery object (quite expensive in
performance terms).

The val() method does some fixing of issues with select elements and
option values, but they are well known and can be dealt with in the
markup.



--
Rob
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      11-14-2011
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
->.<-
 
Reply With Quote
 
Tim Down
Guest
Posts: n/a
 
      11-14-2011
On Nov 14, 7:05*am, RobG <(E-Mail Removed)> wrote:
> On Nov 14, 5:25*am, Hans-Georg Michna <hans-
> (E-Mail Removed)> wrote:
> > On Sun, 13 Nov 2011 08:29:54 +1000, RobG wrote:
> > >On 12/11/11 7:38 PM, Hans-Georg Michna wrote:
> > >>[...]
> > >> Anyway, do you have more examples? These would be good demos of
> > >> the general ignorance towards correct JavaScript programming.
> > >> Good for demos.
> > >One that is specific to jQuery is the use, usually within a listener, of
> > >the expression:

>
> > > * $(this).val()

>
> > >Searching at Google code search with:

>
> > > * \$\(this\)\.val\(\) lang:javascript

>
> > >returns over 5,000 hits.

>
> > Please help my vague memories of jQuery. What is it that .val()
> > does? Or do you mean that the $(...) is simply superfluous?

>
> It can be replaced with the very much faster (and less to type):
>
> * * this.value;
>
> $(this) "wraps" the target in a jQuery object (quite expensive in
> performance terms).
>
> The val() method does some fixing of issues with select elements and
> option values, but they are well known and can be dealt with in the
> markup.


It also messes around with new lines and strips out CR carriage return
characters in the value in attempt to normalize browser behaviour.
However, this seems less than helpful to me: I can see no practical
advantage to it and it causes properties such as selectionStart and
selectionEnd to be unreliable as character indexes within a value
returned by val().

Tim
 
Reply With Quote
 
J.R.
Guest
Posts: n/a
 
      11-14-2011
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.
>>>>
>>>> […]
>>>> 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>


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

--
Joao Rodrigues (J.R.)
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      11-14-2011
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 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
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      11-14-2011
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
 
Reply With Quote
 
Hans-Georg Michna
Guest
Posts: n/a
 
      11-15-2011
On Sun, 13 Nov 2011 23:05:49 -0800 (PST), RobG wrote:

>It can be replaced with the very much faster (and less to type):
>
> this.value;
>
>$(this) "wraps" the target in a jQuery object (quite expensive in
>performance terms).
>
>The val() method does some fixing of issues with select elements and
>option values, but they are well known and can be dealt with in the
>markup.


Thanks! Another interesting example.

Hans-Georg
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
David Mark's Essential Javascript Tips - Volume #8 - Tip #47E -Attaching and Detaching Event Listeners David Mark Javascript 1 12-17-2011 08:07 AM
David Mark's Daily Javascript Tips - Volume #3 - Tip #10 - How toCreate an XHR (Ajax) Object David Mark Javascript 8 12-10-2011 07:56 PM
David Mark's Daily Javascript Tips - Volume #3 - Tip #8 - How toCompute Styles David Mark Javascript 1 12-07-2011 02:34 AM
David Mark's Javascript Daily - Volume #3 - Tip #6 - How to Get andSet HTML David Mark Javascript 6 11-16-2011 06:51 PM
David Mark's Javascript Tip of the Day - Volume #1 - #Tip 14-C David Mark Javascript 16 11-11-2011 02:45 AM



Advertisments