Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Difference between findPos("divThis") and findPos(divThis)

Reply
Thread Tools

Difference between findPos("divThis") and findPos(divThis)

 
 
Cal Who
Guest
Posts: n/a
 
      11-13-2011
I find that either of the two approches below work.I'd appreciate getting a
little insight into what is going on and the good and bad aspects of each
approach.Thanksfunction findPos(obj) {
var w = document.getElementById(obj).offsetWidth;
var h = document.getElementById(obj).offsetHeight;called with:
findPos("divThis")Orfunction findPos(obj) {
var w = obj.offsetWidth;
var h = obj.offsetHeight;called with: findPos(divThis)


 
Reply With Quote
 
 
 
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      11-13-2011
Cal Who wrote:

> I find that either of the two approches below work.I'd appreciate getting
> a little insight into what is going on and the good and bad aspects of
> each approach. Thanks
>
> function findPos(obj)
> {
> var w = document.getElementById(obj).offsetWidth;
> var h = document.getElementById(obj).offsetHeight;
> }
>
> called with: findPos("divThis")
>
> Or
>
> function findPos(obj)
> {
> var w = obj.offsetWidth;
> var h = obj.offsetHeight;
> }


> called with: findPos(divThis)


Your OP was hard to read and not even syntactically valid; I have
reformatted it and completed it. Please take more care next time.

Both approaches work in Internet Explorer and perhaps elsewhere in *Quirks
Mode*. That is so because MSHTML, probably to make DOM scripting easier,
elements with IDs are explicitly represented in the DOM by properties of the
same name of the object referred to by `window'.

That object (`window' object for short) is in the scope chain. So if you
use the `divThis' identifier and no other object in the scope chain has a
property of that name, it will be resolved to the property of the `window'
object. The result is a reference to the DOM element object which
represents the element.

You should not rely on this proprietary behavior, and you should avoid
triggering Quirks Mode.

That findPos() function call really is pointless, as the local variables
will not be visible outside the function here. So unless you want to
support IE/MSHTML 4 and NN 4, for which you would need a wrapper function,
KISS:

var o = document.getElementById("divThis");
var w = o.offsetWidth;
var h = o.offsetHeight;

But do not rely on that either; read the discussion about element dimensions
three days ago. (In general: search, read, post.)

BTW, findPos() does not what its name says.


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
 
 
 
 
Cal Who
Guest
Posts: n/a
 
      11-13-2011

"Thomas 'PointedEars' Lahn" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> Cal Who wrote:
>
>> I find that either of the two approches below work.I'd appreciate getting
>> a little insight into what is going on and the good and bad aspects of
>> each approach. Thanks
>>
>> function findPos(obj)
>> {
>> var w = document.getElementById(obj).offsetWidth;
>> var h = document.getElementById(obj).offsetHeight;

...
>>
>> called with: findPos("divThis")
>>
>> Or
>>
>> function findPos(obj)
>> {
>> var w = obj.offsetWidth;
>> var h = obj.offsetHeight;

...
>
>> called with: findPos(divThis)

>
> Your OP was hard to read and not even syntactically valid; I have
> reformatted it and completed it.


Also, I should have included the "..." that (I just added) to make cleared
that there was more code.

> Both approaches work in Internet Explorer and perhaps elsewhere in *Quirks
> Mode*. That is so because MSHTML, probably to make DOM scripting easier,
> elements with IDs are explicitly represented in the DOM by properties of
> the
> same name of the object referred to by `window'.
>
> That object (`window' object for short) is in the scope chain. So if you
> use the `divThis' identifier and no other object in the scope chain has a
> property of that name, it will be resolved to the property of the `window'
> object. The result is a reference to the DOM element object which
> represents the element.


I don't have the backgroung to understand the above paragraph.
Is the first approch (var w = document.getElementById(obj).offsetWidth) the
better one?

>
> You should not rely on this proprietary behavior, and you should avoid
> triggering Quirks Mode.
>
> That findPos() function call really is pointless, as the local variables
> will not be visible outside the function here. So unless you want to
> support IE/MSHTML 4 and NN 4, for which you would need a wrapper function,
> KISS:
>
> var o = document.getElementById("divThis");
> var w = o.offsetWidth;
> var h = o.offsetHeight;
>
> But do not rely on that either; read the discussion about element
> dimensions
> three days ago. (In general: search, read, post.)


I did search. That's where I got the code I asked about.

If you are refering to: "How to Determine Positions of Elements"

I had read it and in fact have copied it and pasted into my file for later
testing, but he did not, I don't believe, mentioned this method which is
simpler and since I don't know why I should not rely on it I thought I'd try
it.

>
> BTW, findPos() does not what its name says.


Good catch but I'm still developing " findPosAndSize"


Thanks


>
>
> 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-13-2011
Cal Who wrote:

> "Thomas 'PointedEars' Lahn" wrote […]:
>> Your OP was hard to read and not even syntactically valid; I have
>> reformatted it and completed it.

>
> Also, I should have included the "..." that (I just added) to make cleared
> that there was more code.


ACK.

>> Both approaches work in Internet Explorer and perhaps elsewhere in
>> *Quirks Mode*. That is so because MSHTML, probably to make DOM scripting
>> easier, elements with IDs are explicitly represented in the DOM by
>> properties of the same name of the object referred to by `window'.
>>
>> That object (`window' object for short) is in the scope chain. So if you
>> use the `divThis' identifier and no other object in the scope chain has a
>> property of that name, it will be resolved to the property of the
>> `window' object. The result is a reference to the DOM element object
>> which represents the element.

>
> I don't have the backgroung to understand the above paragraph.


I will answer specific, *smart* questions you may have. (So do not ask,
for example, "What is a scope chain?", unless you want a "STFW" answer.)

<http://www.catb.org/~esr/faqs/smart-questions.html>

But I will still ignore you if you (continue to) post with an invalid
From/Reply-To header field value. Usenet can only work if communication
works both ways.

> Is the first approch (var w = document.getElementById(obj).offsetWidth)
> the better one?


Yes and no. It is the better one if you pass the element's ID string for
`obj'. It is not better if you call document.getElementById(obj) twice in
the process. There are also cases where you do not need to call
document.getElementById(); in that case it would be better not to call it.

> If you are refering to: "How to Determine Positions of Elements"


I was referring to the thread started with
<news:(E-Mail Removed)>,
Subject "David Mark's Javascript Tip Du Jour - Volume #1 - Tip #1234 - How
to Measure Element Dimensions", which is what your posted code does.

> I had read it and in fact have copied it and pasted into my file for later
> testing, but he did not, I don't believe, mentioned this method which is
> simpler and since I don't know why I should not rely on it I thought I'd
> try it.


Your posted code has nothing to do with the posting you are referring to.


Please trim your quotes to the relevant minimum next time.

<http://jibbering.com/faq/notes/posting>

HTH

PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f806at$ail$1$(E-Mail Removed)>
 
Reply With Quote
 
Cal Who
Guest
Posts: n/a
 
      11-13-2011
>
> But I will still ignore you if you (continue to) post with an invalid
> From/Reply-To header field value. Usenet can only work if communication
> works both ways.


I have no idea what it is about. I use IE Express and reply with "Reply
Group"
Do I have something set up wrong?
'
>
>> Is the first approch (var w = document.getElementById(obj).offsetWidth)
>> the better one?

>
> Yes and no. It is the better one if you pass the element's ID string for
> `obj'. It is not better if you call document.getElementById(obj) twice in
> the process. There are also cases where you do not need to call
> document.getElementById(); in that case it would be better not to call it.
>


That's what I'll do then.

Thanks


 
Reply With Quote
 
J.R.
Guest
Posts: n/a
 
      11-13-2011
On 13/11/2011 18:04, Cal Who wrote:
> >
>> But I will still ignore you if you (continue to) post with an invalid
>> From/Reply-To header field value. Usenet can only work if communication
>> works both ways.

>
> I have no idea what it is about. I use IE Express and reply with "Reply
> Group"
> Do I have something set up wrong?
> '
>>
>>> Is the first approch (var w = document.getElementById(obj).offsetWidth)
>>> the better one?

>>
>> Yes and no. It is the better one if you pass the element's ID string for
>> `obj'. It is not better if you call document.getElementById(obj) twice in
>> the process. There are also cases where you do not need to call
>> document.getElementById(); in that case it would be better not to call it.
>>

>
> That's what I'll do then.
>
> Thanks
>
>


I always use obj as a reference to an element of the DOM. But I admit
there are cases in which you would like to receive either a string or an
element reference as the function's argument. In this case, try this code:

function getOuterDimensions(obj) {
var el = (typeof obj == 'string') ? document.getElementById(obj) :
obj,
w = el.offsetWidth;
h = el.offsetHeight;
...

}

Please, have a look at the post called "David Mark's Javascript Tip Du
Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions".

--
Joao Rodrigues (J.R.)
 
Reply With Quote
 
J.R.
Guest
Posts: n/a
 
      11-13-2011
On 13/11/2011 18:55, J.R. wrote:
> On 13/11/2011 18:04, Cal Who wrote:
>> >
>>> But I will still ignore you if you (continue to) post with an invalid
>>> From/Reply-To header field value. Usenet can only work if communication
>>> works both ways.

>>
>> I have no idea what it is about. I use IE Express and reply with "Reply
>> Group"
>> Do I have something set up wrong?
>> '
>>>
>>>> Is the first approch (var w = document.getElementById(obj).offsetWidth)
>>>> the better one?
>>>
>>> Yes and no. It is the better one if you pass the element's ID string for
>>> `obj'. It is not better if you call document.getElementById(obj)
>>> twice in
>>> the process. There are also cases where you do not need to call
>>> document.getElementById(); in that case it would be better not to
>>> call it.
>>>

>>
>> That's what I'll do then.
>>
>> Thanks
>>
>>

>
> I always use obj as a reference to an element of the DOM. But I admit
> there are cases in which you would like to receive either a string or an
> element reference as the function's argument. In this case, try this code:
>
> function getOuterDimensions(obj) {
> var el = (typeof obj == 'string') ? document.getElementById(obj) :
> obj,
> w = el.offsetWidth;
> h = el.offsetHeight;
> ...
>
> }
>


Correcting a typo:

var el = (typeof obj == 'string') ? document.getElementById(obj) :
obj,
w = el.offsetWidth, // , instead of ;
h = el.offsetHeight;

> Please, have a look at the post called "David Mark's Javascript Tip Du
> Jour - Volume #1 - Tip #1234 - How to Measure Element Dimensions".
>


--
Joao Rodrigues (J.R.)
 
Reply With Quote
 
Cal Who
Guest
Posts: n/a
 
      11-13-2011
>
> var el = (typeof obj == 'string') ? document.getElementById(obj) :
> obj,
> w = el.offsetWidth, // , instead of ;
> h = el.offsetHeight;
>

That's neat.

Except for the commas!

I looked up comma operator but am still confused.

Wouldn't this be OK (better?)

var el = (typeof obj == 'string') ? document.getElementById(obj) : obj;
w = el.offsetWidth ;
h = el.offsetHeight;
...




 
Reply With Quote
 
J.R.
Guest
Posts: n/a
 
      11-13-2011
On 13/11/2011 20:10, Cal Who wrote:
> >
>> var el = (typeof obj == 'string') ? document.getElementById(obj) :
>> obj,
>> w = el.offsetWidth, // , instead of ;
>> h = el.offsetHeight;
>>

> That's neat.
>
> Except for the commas!
>
> I looked up comma operator but am still confused.
>
> Wouldn't this be OK (better?)
>
> var el = (typeof obj == 'string') ? document.getElementById(obj) : obj;
> w = el.offsetWidth ;
> h = el.offsetHeight;
> ...
>


No, because the ";" marks the end of the variable declaration list. In
the above code, you are indeed creating an implied global variable
called h, instead of creating a private variable in the function scope.

it is one of the JavaScript best practices to declare all of the
variables used in a function at the top of the function body. You may
have many variables separated by commas, e.g

var el = ...,
h = ...,
w = ...,
i, j, len, ..., z;

You must not use multiple var statements such as:
var el;
var h = ...;
var z;

--
Joao Rodrigues (J.R.)
 
Reply With Quote
 
Cal Who
Guest
Posts: n/a
 
      11-14-2011

"J.R." <(E-Mail Removed)> wrote in message
news:j9phhk$s3i$(E-Mail Removed)...
> On 13/11/2011 20:10, Cal Who wrote:
>> >
>>> var el = (typeof obj == 'string') ? document.getElementById(obj) :
>>> obj,
>>> w = el.offsetWidth, // , instead of ;
>>> h = el.offsetHeight;
>>>

>> That's neat.
>>
>> Except for the commas!
>>
>> I looked up comma operator but am still confused.
>>
>> Wouldn't this be OK (better?)
>>
>> var el = (typeof obj == 'string') ? document.getElementById(obj) : obj;
>> w = el.offsetWidth ;
>> h = el.offsetHeight;
>> ...
>>

>
> No, because the ";" marks the end of the variable declaration list. In the
> above code, you are indeed creating an implied global variable called h,
> instead of creating a private variable in the function scope.
>
> it is one of the JavaScript best practices to declare all of the variables
> used in a function at the top of the function body. You may have many
> variables separated by commas, e.g
>
> var el = ...,
> h = ...,
> w = ...,
> i, j, len, ..., z;
>
> You must not use multiple var statements such as:
> var el;
> var h = ...;
> var z;
>
> --
> Joao Rodrigues (J.R.)



Thanks a lot


 
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
FAQ 7.17 What's the difference between dynamic and lexical (static) scoping? Between local() and my()? PerlFAQ Server Perl Misc 0 04-15-2011 04:00 AM
FAQ 7.17 What's the difference between dynamic and lexical (static) scoping? Between local() and my()? PerlFAQ Server Perl Misc 0 01-06-2011 05:00 PM
difference between between these "char"s arnuld C++ 33 03-05-2007 03:11 PM
Difference between bin and obj directories and difference between project references and dll references jakk ASP .Net 4 03-22-2005 09:23 PM
Exact difference between 'const char *' and 'char *', also diff between 'const' and 'static' Santa C Programming 1 07-17-2003 02:10 PM



Advertisments