How to detect the absolute position (top, left) of an element (also for IE) ?

[Pugi!]

I create elements dynamically on a webpage using AJAX. I add events
(like onclick). Everything works fine I can retrace the origin of the
event, the parentnode, ... but now I have to put a layer (a form) on
the image from which the event originated. I have foun some code on the
web that works fine for FF and Opera, but not for IE (6 & 7). The
top-position is good, but not the left (more then 100px to the left of
for IE). I have found another method that gets the absolute x-position
of an element but works only good for IE 6 & 7. How do I distinguish
between browsers ? Normally you test wether an object exists like if
(document.all) ... Problem: Opera also knows how to handle
document.all. For the moment I use this:

function getXYCoordinates(obj) {
var curleft = curtop = 0;
var x = obj.offsetLeft; // for IE
if (obj.offsetParent) {
curleft = obj.offsetLeft;
curtop = obj.offsetTop;
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
}
}
if (document.all) { // here I should test for IE, but also Opera gets
caught
return [x,curtop];
} else {
return [curleft,curtop];
}
}

This works for FF and IE 6 & 7 but not for Opera. If I skip the test
(document.all) and return [curleft, curtop] it works fine for FF and
Opera but not for IE 6 & 7.
How can I test an relevant object to determine wether I should return
[x, curtop] instead of [curleft, curtop] ?
Or is there a better method to determine the position of an object that
raised an event.

thanx,

Pugi!

[marss]

Pugi! wrote:

}
if (document.all) { // here I should test for IE, but also Opera gets
caught
return [x,curtop];
} else {
return [curleft,curtop];
}
}

if (document.all && user_agent.indexOf("opera") == -1)
{
//IE
}
else
{
//FF,Opera
}

[Randy Webb]

marss said the following on 12/19/2006 5:05 AM:

Pugi! wrote:

> }
if (document.all) { // here I should test for IE, but also Opera gets
caught
return [x,curtop];
} else {
return [curleft,curtop];
}
}

if (document.all && user_agent.indexOf("opera") == -1)
{
//IE

No, it is a browser that supports document.all and doesn't have opera in
the userAgent string. It does *NOT* mean it is IE.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[marss]

var user_agent = navigator.userAgent.toLowerCase();
if (document.all && user_agent.indexOf("opera") == -1)
{
//IE
}
else
{
//FF,Opera
}

[marss]

Randy Webb wrote:

marss said the following on 12/19/2006 5:05 AM:

Pugi! wrote:

}
if (document.all) { // here I should test for IE, but also Opera gets
caught
return [x,curtop];
} else {
return [curleft,curtop];
}
}

if (document.all && user_agent.indexOf("opera") == -1)
{
//IE

No, it is a browser that supports document.all and doesn't have opera in
the userAgent string. It does *NOT* mean it is IE.

This is advice on specific case.
Simplified for clarity.

[Randy Webb]

marss said the following on 12/19/2006 5:15 AM:

Randy Webb wrote:

>marss said the following on 12/19/2006 5:05 AM:

>>Pugi! wrote:

}
if (document.all) { // here I should test for IE, but also Opera gets
caught
return [x,curtop];
} else {
return [curleft,curtop];
}
}

if (document.all && user_agent.indexOf("opera") == -1)
{
//IE

No, it is a browser that supports document.all and doesn't have opera in
the userAgent string. It does *NOT* mean it is IE.

This is advice on specific case.
Simplified for clarity.

It is still useless advice that teaches people to think the
navigator.userAgent string can be used to identify a browser when it
can't. Want a test that will, without a doubt, identify Opera?

if (window.opera){alert('YOU ARE USING OPERA!!!')

Anything else with regards to the user agent string identify the browser
is unmitigated garbage.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Answer:It destroys the order of the conversation
Question: Why?
Answer: Top-Posting.
Question: Whats the most annoying thing on Usenet?

[marss]

Randy Webb wrote:

It is still useless advice

This variant can solve concrete case no matter what do you think about
it. It longer than your solution but it is working.

that teaches people to think the
navigator.userAgent string can be used to identify a browser when it
can't.

If people CAN identify Opera by navigator.userAgent than they MAY think
that navigator.userAgent string can be used to identify Opera.

Want a test that will, without a doubt, identify Opera?

if (window.opera){alert('YOU ARE USING OPERA!!!')

Anything else with regards to the user agent string identify the browser
is unmitigated garbage.

Hard to be a God, eh?

[MB]

Randy Webb skrev:

marss said the following on 12/19/2006 5:15 AM:

>Randy Webb wrote:

>>marss said the following on 12/19/2006 5:05 AM:
Pugi! wrote:

}
if (document.all) { // here I should test for IE, but also
Opera gets
caught
return [x,curtop];
} else {
return [curleft,curtop];
}
}
>
if (document.all && user_agent.indexOf("opera") == -1)
{
//IE
No, it is a browser that supports document.all and doesn't have opera in
the userAgent string. It does *NOT* mean it is IE.

This is advice on specific case. Simplified for clarity.

It is still useless advice that teaches people to think the
navigator.userAgent string can be used to identify a browser when it
can't. Want a test that will, without a doubt, identify Opera?

if (window.opera){alert('YOU ARE USING OPERA!!!')

Anything else with regards to the user agent string identify the browser
is unmitigated garbage.

Hi Randy.
Sorry, but your code will not work and is just garbage.

Quote from http://www.javascriptmall.com/learn/lesson5.htm:

"You use the if statement in JavaScript to make decisions. The syntax
for it is as follows:

if (condition){
statements
}

The if keyword identifies this as an if statement. The condition in the
parenthesis ( ) is evaluated to determine if true, and if so then the
statements inside the curly braces { } are executed, otherwise they are
skipped and the programs continues with the first line after the if
statement."

In other words, you can write one of the following:

simplest:

if (window.opera) alert('YOU ARE USING OPERA!!!');

....or a more correct and even working use of curly braces:

if (window.opera){alert('YOU ARE USING OPERA!!!');}

....or the above in a bit more easy to read way:

if (window.opera) {
alert('YOU ARE USING OPERA!!!');
}

I hope this helps you a bit. Javascript is not always easy to learn for
the beginner but I'm sure you'll soon get the hang of it.
Have a nice day. Be nice to people and they will be nice back making
your entire day nice. :)

/MB

[Richard Cornford]

MB wrote:
<snip>

Quote from http://www.javascriptmall.com/learn/lesson5.htm:

"You use the if statement in JavaScript to make decisions. The syntax
for it is as follows:

if (condition){
statements
}

The if keyword identifies this as an if statement. The condition in the
parenthesis ( ) is evaluated to determine if true, and if so then the
statements inside the curly braces { } are executed, ...

<snip ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

The curly braces are a statement in javascript; a Block statement. The
- if - statement only conditionally executes a single statement, which
may be a Block statement and so its execution may imply the execution
of numerous contained statements.

Richard.

[Matt Kruse]

Pugi! wrote:

Or is there a better method to determine the position of an object
that raised an event.

http://www.JavascriptToolbox.com/lib/objectposition/

That's the most robust generalized solution I know of.

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com

[Randy Webb]

marss said the following on 12/19/2006 7:31 AM:

Randy Webb wrote:

>It is still useless advice

This variant can solve concrete case no matter what do you think about
it. It longer than your solution but it is working.

It isn't so much a question of whether it works - in this scenario - as
it a question of whether it is a good practice or not to depend on the
userAgent string when that string can be altered.

>that teaches people to think the
navigator.userAgent string can be used to identify a browser when it
can't.

If people CAN identify Opera by navigator.userAgent than they MAY think
that navigator.userAgent string can be used to identify Opera.

It can also lead to people thinking they can identify Mozilla, Internet
Explorer, iCab and other browsers by the navigator.userAgent string
which it can't. A test of the navigator.userAgent string in my MSIE7 for
the letters "MSIE" returns false.

>Want a test that will, without a doubt, identify Opera?

if (window.opera){alert('YOU ARE USING OPERA!!!')

Anything else with regards to the user agent string identify the browser
is unmitigated garbage.

Hard to be a God, eh?

Nothing to do with being a "God", it has to do with trying to write as
bullet-proof a solution as possible and that solution - even in this
case - doesn't include the userAgent string.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/