«

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

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

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

On Nov 14, 5:25*am, Hans-Georg Michna <hans-
georgNoEmailPle...@michna.com> 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

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

On Nov 14, 7:05*am, RobG <rg...@iinet.net.au> wrote:
> On Nov 14, 5:25*am, Hans-Georg Michna <hans-
> georgNoEmailPle...@michna.com> 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

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

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

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

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