How to get the absolute position after scroll

J

john_woo

Hi,

take the following script as example,

<html>
<body>
<script language="JavaScript">
function function2() {
mySX.innerHTML = window.event.screenX;
mySY.innerHTML = window.event.screenY;
}
</script>
<p>
<b>Screen X:</b>
<span id="mySX">0</span>
</p>
<p>
<b>Screen Y:</b>
<span id="mySY">0</span>
</p>
<div id="myDiv"
onmousemove="function2();"
style="border:solid; width:50; height:50; overflow:scroll;">
<img src="google.gif"/>
</div>
</body>
</html>

after the image scrolled/dragged, the X/Y value doesn't give the
absolute one. I'm wondering:

1. how to get the real offset;
2. how to get the width of the fixed screen, (in this case in width of
the div, but in other cases, width is fixed one)
 
M

My Pet Programmer

john_woo said:
Hi,

take the following script as example,

<html>
<body>
<script language="JavaScript">
The language attribute isn't valid, it was only ever for IE anyway. The
official attribute is type, and it takes a mime type:
function function2() {
mySX.innerHTML = window.event.screenX;
mySY.innerHTML = window.event.screenY;
}
This should take an event as an argument, if you want it to work on
anything but IE. Nobody else has the window.event object except IE.
function f2(e) {
if (window.event) {
e = window.event;
}
// rest of the function
}
</script>
<p>
<b>Screen X:</b>
<span id="mySX">0</span>
</p>
<p>
<b>Screen Y:</b>
<span id="mySY">0</span>
</p>
<div id="myDiv"
onmousemove="function2();"
That should be:
onmousemove="function2(event);"

So that it will pass the mouseEvent along to the funciton you're calling.
style="border:solid; width:50; height:50; overflow:scroll;">
<img src="google.gif"/>
</div>
</body>
</html>

after the image scrolled/dragged, the X/Y value doesn't give the
absolute one. I'm wondering:

1. how to get the real offset;
2. how to get the width of the fixed screen, (in this case in width of
the div, but in other cases, width is fixed one)
Well, I can give you some mouse position code that works like a charm,
can't be of much assistance on the width thing.

function getMousePosition(e) {
var x,y;
if (window.event){
x = window.event.clientX
y = window.event.clientY

x += document.body.scrollLeft;
y += document.body.scrollTop;
} else {
x = e.pageX;
y = e.pageY;
}
return {xPos:x, yPos:y};
} // getMousePosition

Usage:

var pos = getMousePosition(e);
alert("(" + pos.xPos + ", " + pos.yPos + ")");

~A!


--
Anthony Levensalor
(e-mail address removed)

Only two things are infinite, the universe and human stupidity,
and I'm not sure about the former. - Albert Einstein
 
P

Peter Michaux

john_woo said:> Hi,



The language attribute isn't valid, it was only ever for IE anyway. The
official attribute is type, and it takes a mime type:
<script type="text/javascript">

Actually <script type="application/javascript"> is the approved
standard. In a video, Douglas Crockford mentioned this was approved in
2006 or 2007. I still use text/javascript and don't know when it will
be a good idea to change.


This should take an event as an argument, if you want it to work on
anything but IE. Nobody else has the window.event object except IE.
function f2(e) {
if (window.event) {
e = window.event;
}
// rest of the function}

Some interesting information on David Flanagan's blog about IE event
objects

http://www.davidflanagan.com/blog/2006_10.html#000114

http://www.davidflanagan.com/blog/2007_03.html#000126

Peter
 
M

My Pet Programmer

R

Richard Cornford

My said:
john_woo said:
The language attribute isn't valid,

The LANGUAGE attribute is valid HTML. It is a deprecated attribute in
HTML 4 and as such cannon be used with the 'strict' DTD and result in a
valid HTML document. It may be used with the 'transitional' DTD, but
because the TYPE attribute is required in all valid HTML documents the
LANGUAGE attribute is redundant even with the transitional DTD (Except
where it is used to specify a language version, which is almost always a
very bad idea).
it was only ever for IE anyway.

Many browsers recognise and 'use' a language attribute. Some will even
change their behaviour based upon it (particularly with
LANGUAGE="JavaScript1.2"), but that is almost always undesirable (as
some will not so the result is likely be to inconsistent script
interpretation, which would be an avoidable additional headache).
The official attribute is type, and it takes
a mime type:
<script type="text/javascript">

The attribute required in valid HTML is TYPE, and providing a TYPE
attribute renders the LANGUAGE attribute redundant. The value for the
TYPE attribute should be "text/javascript" at the moment for reasons of
expedience. That value has officially declared "obsolete" in 2006, but
none of the 'official' alternatives are sufficiently widely recognised
yet for their use to anything but problematic.
This should take an event as an argument,

Design wise it probably should, but this function is not the event
handler, it is just a function called by the event handler, so there is
no implicit event argument.
if you want it to work on anything but IE.

The absence of an event parameter is not the limiting factor here; it is
the explicit use of - window.event -.
Nobody else has the window.event object except IE.

If you don't count Opera, Safari, Konqueror, NetFront, IceBrowser, etc.
Generally, even browsers that do pass an event object when they call the
even handling function also provide a global 'event' property to refer
to the (same) event. That is simply done for compatibility with IE, and
the issue comes mostly with browsers from the Netscape/Mozilla/Firefox
family which are virtually the only ones that do not provide the global
'even' as an alternative to an argument to the function call.
function f2(e) {
if (window.event) {
e = window.event;
}

As the majority of browser do pass an event object as an argument it
should be more efficient to test that and only go to the -
window.event - alternative if it is not found/passed. (The scope chain
resolution of the - e - parameter should be faster than the resolution
of the property accessor - window.event - even on IE browsers).
// rest of the function
}
That should be:
onmousemove="function2(event);"

So that it will pass the mouseEvent along to the funciton
you're calling.

It probably should, but the reason for using the Identifier 'event' in
the value of an intrinsic even attribute should probably be explained.
It is because when a browser processes the value of an intrinsic event
attribute it uses the character sequence in that value of the body code
for a function it creates to be called when the event happens. This is
the equivalent of a programmer defining their own function and assigning
it to the intrinsic event property of the DOM element. On IE that would
be the equivalent of:-

divElementReference.onmousemove = function(){
function2(event);
};

- on most over browsers (and particularly Mozilla/Firefox/Gecko
browsers) the function created by the browser has a formal parameter
with the name 'event' (to receive the passed event object). Thus on
those browsers the equivalent manual code would be:-

divElementReference.onmousemove = function(event){
function2(event);
};

So when the body of the function is executed on a
Mozilla/Frirefox/Gecko-style browser the resolution of the Identifier
'event' ends with the formal parameter and results it the value of event
object passed as an argument. On IE browsers, where no such parameter
exists, the resolution of the Identifier carries on up the scope chain
until it gets to the global object (which is also the window object) and
as the global/window object has an 'event' property (- window.event -)
the resulting value is the event object referred to by that property.

The result is that in intrinsic event attribute values the easiest way
of normalising the event object between the Netscape-style and the
IE-style is simply to employ the 'event' Identifier. Unfortunately the
same is never true in programmer defined functions assigned to intrinsic
event properties.

Well, I can give you some mouse position code that works
like a charm,

Charms don't work. If we lived in a world where charms and mystical
incantations worked the majority of us would be magicians not
programmers.
can't be of much assistance on the width thing.

function getMousePosition(e) {
var x,y;
if (window.event){
x = window.event.clientX
y = window.event.clientY

x += document.body.scrollLeft;
y += document.body.scrollTop;

IE (6+) browsers (and imitators) can work in "Quirks" (or "BackCompat")
mode and in "Standards" (or "CSS1Compat") mode. The correct scroll
offset is read from the body element in "Quirks" mode and the HTML
element (documentElement) in "Standards" mode. The mode is determined
from the DOCTYPE declaration used (or by its absence).
} else {
x = e.pageX;
y = e.pageY;
<snip>

There is a discrepancy between - pageX/Y - and your IE values consisting
of the default border on the 'root' element (clientTop/Left). That
discrepancy is 2 pixels on a default windows installation, but the
border value is user modifiable so should be dynamically read. It is
normal to adjust IE mouse positions by these values in order to give a
coordinate system that is consistent across browsers.

Richard.
 
D

David Mark

john_woo said:> Hi,



The language attribute isn't valid, it was only ever for IE anyway. The
official attribute is type, and it takes a mime type:


This should take an event as an argument, if you want it to work on
anything but IE. Nobody else has the window.event object except IE.
function f2(e) {
   if (window.event) {
     e = window.event;
   }
   // rest of the function}

That should be:
onmousemove="function2(event);"

So that it will pass the mouseEvent along to the funciton you're calling.






Well, I can give you some mouse position code that works like a charm,
can't be of much assistance on the width thing.

function getMousePosition(e) {
   var x,y;
   if (window.event){

This is an object inference, which is a form of browser sniffing. Test
the pageX/Y properties first, then clientX/Y.
     x = window.event.clientX
     y = window.event.clientY

     x += document.body.scrollLeft;
     y += document.body.scrollTop;

This will only work in quirks mode. You must use
document.documentElement in standards mode. You also have to add the
clientLeft/Top properties of the body or documentElement (usually 2
pixels each, but could conceivably be anything as the outermost border
is part of the chrome.)

[snip]
 
T

Thomas 'PointedEars' Lahn


Pure nonsense. The `language' attribute of the `script' element was
"always" valid, it is defined in HTML 3.2 (HTML 2.0 is OBSOLETE as per
RFC2854), and it is also defined in HTML 4.01 Transitional and XHTML 1.0
Transitional. AFAIK, using it does not have anything to do with IE; if the
attribute value would have an effect on execution in any UA, that would be
NN4 where the value "JavaScript1.2" instead of "JavaScript" triggers a
different (not strictly ECMAScript-compliant) behavior with assignments in
conditional statements.
Actually <script type="application/javascript"> is the approved
standard.

That is nonsense, too. RFC4329 specifies *four* MIME media types for
ECMAScript-compliant script content. Two of them being prematurely marked
"obsolete" by the RFC's script-inexperienced author does not mean they
should not be used. Quite the contrary; these two marked media types,
especially `text/javascript', are the ones that are most widely supported:

http://pointedears.de/scripts/test/mime-types/
In a video, Douglas Crockford mentioned this was approved in
2006 or 2007. I still use text/javascript and don't know when
it will be a good idea to change.

It would appear that reality is going to replace theory here, because
switching to the new media types in order to accomodate new user agents that
support them will ultimately mean not to support older user agents anymore,
be they just ignoring the attribute value or ignoring `script' elements with
it. I doubt anyone who is trying to sell something on the Web could afford
that.


PointedEars
 
M

My Pet Programmer

Richard Cornford said:
The LANGUAGE attribute is valid HTML. It is a deprecated attribute in
HTML 4 and as such cannon be used with the 'strict' DTD and result in a
valid HTML document. It may be used with the 'transitional' DTD, but
because the TYPE attribute is required in all valid HTML documents the
LANGUAGE attribute is redundant even with the transitional DTD (Except
where it is used to specify a language version, which is almost always a
very bad idea).
Thank you, I did not know that.
Many browsers recognise and 'use' a language attribute. Some will even
change their behaviour based upon it (particularly with
LANGUAGE="JavaScript1.2"), but that is almost always undesirable (as
some will not so the result is likely be to inconsistent script
interpretation, which would be an avoidable additional headache).
OR that.
The attribute required in valid HTML is TYPE, and providing a TYPE
attribute renders the LANGUAGE attribute redundant. The value for the
TYPE attribute should be "text/javascript" at the moment for reasons of
expedience. That value has officially declared "obsolete" in 2006, but
none of the 'official' alternatives are sufficiently widely recognised
yet for their use to anything but problematic.
Another good thing to know. Thanks!

[snip]
If you don't count Opera, Safari, Konqueror, NetFront, IceBrowser, etc.
Generally, even browsers that do pass an event object when they call the
even handling function also provide a global 'event' property to refer
to the (same) event. That is simply done for compatibility with IE, and
the issue comes mostly with browsers from the Netscape/Mozilla/Firefox
family which are virtually the only ones that do not provide the global
'even' as an alternative to an argument to the function call.
Ah, I was picking on the wrong browser again. I'm not terribly bright,
or hadn't you noticed? :)
As the majority of browser do pass an event object as an argument it
should be more efficient to test that and only go to the - window.event
- alternative if it is not found/passed. (The scope chain resolution of
the - e - parameter should be faster than the resolution of the property
accessor - window.event - even on IE browsers).

So noted. You absolutely have my attention.
Charms don't work. If we lived in a world where charms and mystical
incantations worked the majority of us would be magicians not programmers.
Very true. And if we lived in a world where everything was taken as
literally as that on a consistent basis, I would likely shoot myself in
the face.
There is a discrepancy between - pageX/Y - and your IE values consisting
of the default border on the 'root' element (clientTop/Left). That
discrepancy is 2 pixels on a default windows installation, but the
border value is user modifiable so should be dynamically read. It is
normal to adjust IE mouse positions by these values in order to give a
coordinate system that is consistent across browsers.
And I think this was the best part of the whole thing. I love it when
you post on my code, Richard, thank you. I will correct update the JS I
have running, and will endeavor not to repeat those mistakes.

~A!

--
Anthony Levensalor
(e-mail address removed)

Only two things are infinite, the universe and human stupidity,
and I'm not sure about the former. - Albert Einstein
 
M

My Pet Programmer

David Mark said:
On Dec 28, 12:15 pm, My Pet Programmer <[email protected]> [snip]
function getMousePosition(e) {
var x,y;
if (window.event){

This is an object inference, which is a form of browser sniffing. Test
the pageX/Y properties first, then clientX/Y.
Gotcha. Feature, not browser. Working on that. Thanks for the tip.
This will only work in quirks mode. You must use
document.documentElement in standards mode. You also have to add the
clientLeft/Top properties of the body or documentElement (usually 2
pixels each, but could conceivably be anything as the outermost border
is part of the chrome.)
God, I love you guys.

~A!

--
Anthony Levensalor
(e-mail address removed)

Only two things are infinite, the universe and human stupidity,
and I'm not sure about the former. - Albert Einstein
 
T

Thomas 'PointedEars' Lahn

Thomas said:

Pure nonsense. The `language' attribute of the `script' element was
"always" valid, it is defined in HTML 3.2 [...]

Sorry, I got carried away here. HTML 3.2 does _not_ define *any* attributes
for the `script' element. Insofar "My Pet Programmer" has a point, although
the term "valid" in this context is inappropriate; a UA does not define
which elements or attributes are valid, the languages standardized DTD does.


PointedEars
 
M

My Pet Programmer

Thomas 'PointedEars' Lahn said:
[snip]
Thanks for taking the time to reply, Thomas. I'm not sure what I have
done in my attempts at learning the intricacies of Javascript to inspire
your ire, but I doubt it matters much.
Pure nonsense.
FYI - That is where I stopped reading your reply. With the exception of
my first thread on this newsgroup, I treat everyone with respect here. I
am interested in gaining a much deeper understanding of the language,
and I lack both the time and the inclination to be insulted while I do it.

All the best,
~A!


--
Anthony Levensalor
(e-mail address removed)

Only two things are infinite, the universe and human stupidity,
and I'm not sure about the former. - Albert Einstein
 
M

My Pet Programmer

Thomas 'PointedEars' Lahn said:
[snip] HTML 3.2 does _not_ define *any* attributes
for the `script' element. Insofar "My Pet Programmer" has a point, although
the term "valid" in this context is inappropriate; a UA does not define
which elements or attributes are valid, the languages standardized DTD does.


PointedEars
Agreed, my use of the term was not only inappropriate, but wrong. I
should not have made a concrete statement without concrete knowledge. I
appreciate the correction, it won't happen again.

All the best,
~A!

--
Anthony Levensalor
(e-mail address removed)

Only two things are infinite, the universe and human stupidity,
and I'm not sure about the former. - Albert Einstein
 
T

Thomas 'PointedEars' Lahn

My said:
Thomas 'PointedEars' Lahn said: [snip]
Pure nonsense.
FYI - That is where I stopped reading your reply.

That's a shame because what followed contained the justification for the former.
With the exception of my first thread on this newsgroup, I treat everyone
with respect here. I am interested in gaining a much deeper understanding
of the language, and I lack both the time and the inclination to be
insulted while I do it.

JFTR: I do not consider calling nonsense what it is an insult to anyone, nor
was that the intention of my posting. However, to avoid receiving that and
similar replies in the future I advise you to post only when you are really
sure. The subject is not exactly new on this newsgroup and can be readily
cross-checked with on the Web, too. See also my e-mail(s).


PointedEars
 
M

My Pet Programmer

Thomas 'PointedEars' Lahn said:
[hopefully snipped enough so Thomas doesn't berate me about over-quoting
in another email]
JFTR: I do not consider calling nonsense what it is an insult to anyone, nor
was that the intention of my posting. However, to avoid receiving that and
similar replies in the future I advise you to post only when you are really
sure. The subject is not exactly new on this newsgroup and can be readily
cross-checked with on the Web, too. See also my e-mail(s).

Thomas,

I replied to your email just now, so you'll have that in a moment or
two. What should I say, you're better at Javascript than I am? I think
that's fairly obvious to anyone reading the group about now.

I've learned quite a bit just in the week or so I've been hanging around
here, and I am thankful that this group exists, and that true experts
are willing to lend their advice.

I'm taking the advice of the other guys up here, and sticking my neck
out even when I'm not 100% on something. And when four people post back
and point out different flaws and how they could be fixed, that's a good
thing.

Who wants to tell me what a VK is?



--
Anthony Levensalor
(e-mail address removed)

Only two things are infinite, the universe and human stupidity,
and I'm not sure about the former. - Albert Einstein
 
D

David Mark

Thomas 'PointedEars' Lahn said:
[hopefully snipped enough so Thomas doesn't berate me about over-quoting
in another email]
JFTR: I do not consider calling nonsense what it is an insult to anyone,nor
was that the intention of my posting.  However, to avoid receiving that and
similar replies in the future I advise you to post only when you are really
sure.  The subject is not exactly new on this newsgroup and can be readily
cross-checked with on the Web, too.  See also my e-mail(s).

Thomas,

I replied to your email just now, so you'll have that in a moment or
two. What should I say, you're better at Javascript than I am? I think
that's fairly obvious to anyone reading the group about now.

I've learned quite a bit just in the week or so I've been hanging around
here, and I am thankful that this group exists, and that true experts
are willing to lend their advice.

I'm taking the advice of the other guys up here, and sticking my neck
out even when I'm not 100% on something. And when four people post back
and point out different flaws and how they could be fixed, that's a good
thing.

Who wants to tell me what a ** is?

[Name censored]

Nobody is really sure. Whatever it is, it is responsible for an
avalanche of misinformation in this and other groups. Please do not
speak of that devil as it may appear. Lately it has been on a most
welcome sabbatical.
 
M

My Pet Programmer

David Mark said:
[snip]
Who wants to tell me what a ** is?

[Name censored]

Nobody is really sure. Whatever it is, it is responsible for an
avalanche of misinformation in this and other groups. Please do not
speak of that devil as it may appear. Lately it has been on a most
welcome sabbatical.

Ah, I see. I will never again mention they who must not be named. :)

See, trial and error. Ya gotta learn!

~A!

--
Anthony Levensalor
(e-mail address removed)

Only two things are infinite, the universe and human stupidity,
and I'm not sure about the former. - Albert Einstein
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,769
Messages
2,569,578
Members
45,052
Latest member
LucyCarper

Latest Threads

Top