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

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)

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

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

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

"Thomas 'PointedEars' Lahn" <PointedEars@web.de> wrote in message
news:4775241.ypaU67uLZW@PointedEars.de...
> 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

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

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:bd12b66f-33f5-43d2-8e22-6f81b42c3d8b@n14g2000vbn.googlegroups.com>,
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$8300dec7@news.demon.co.uk>

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

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

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

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

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

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

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

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

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

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

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

"J.R." <groups_jr-1@yahoo.com.br> wrote in message
news:j9phhk$s3i$1@speranza.aioe.org...
> 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