Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > How to get the absolute position after scroll

Reply
Thread Tools

How to get the absolute position after scroll

 
 
john_woo
Guest
Posts: n/a
 
      12-28-2007
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)

--
Thanks
John
 
Reply With Quote
 
 
 
 
My Pet Programmer
Guest
Posts: n/a
 
      12-28-2007
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:
<script type="text/javascript">

> 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)
>
> --
> Thanks
> John

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, yPos:y};
} // getMousePosition

Usage:

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

~A!


--
Anthony Levensalor
http://www.velocityreviews.com/forums/(E-Mail Removed)

Only two things are infinite, the universe and human stupidity,
and I'm not sure about the former. - Albert Einstein
 
Reply With Quote
 
 
 
 
Peter Michaux
Guest
Posts: n/a
 
      12-28-2007
On 28 dic, 09:15, My Pet Programmer <(E-Mail Removed)>
wrote:
> 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:
> <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.



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


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
 
Reply With Quote
 
My Pet Programmer
Guest
Posts: n/a
 
      12-28-2007
Peter Michaux said:

> 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

That IS interesting. Can we reasonably come to the conclusion that IE is
friggin' daffy yet?

~A!

--
Anthony Levensalor
(E-Mail Removed)

Only two things are infinite, the universe and human stupidity,
and I'm not sure about the former. - Albert Einstein
 
Reply With Quote
 
Richard Cornford
Guest
Posts: n/a
 
      12-28-2007
My Pet Programmer wrote:
> john_woo said:

<snip>
>> <html>
>> <body>
>> <script language="JavaScript">

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

>> function function2() {
>> mySX.innerHTML = window.event.screenX;
>> mySY.innerHTML = window.event.screenY;
>> }

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


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.

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

 
Reply With Quote
 
David Mark
Guest
Posts: n/a
 
      12-28-2007
On Dec 28, 12:15*pm, My Pet Programmer <(E-Mail Removed)>
wrote:
> 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:
> <script type="text/javascript">
>
> > 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)

>
> > --
> > Thanks
> > John

>
> 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]
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      12-28-2007
Peter Michaux wrote:
> [...] My Pet Programmer [...] wrote:
>> 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:


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.

>> <script type="text/javascript">

>
> 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
--
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
 
My Pet Programmer
Guest
Posts: n/a
 
      12-28-2007
Richard Cornford said:
> My Pet Programmer wrote:
>> john_woo said:

> <snip>
>>> <html>
>>> <body>
>>> <script language="JavaScript">

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

Thank you, I did not know that.

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

OR that.

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

Another good thing to know. Thanks!

[snip]
>> 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.
>

Ah, I was picking on the wrong browser again. I'm not terribly bright,
or hadn't you noticed?

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


So noted. You absolutely have my attention.

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

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

Only two things are infinite, the universe and human stupidity,
and I'm not sure about the former. - Albert Einstein
 
Reply With Quote
 
My Pet Programmer
Guest
Posts: n/a
 
      12-28-2007
David Mark said:
> On Dec 28, 12:15 pm, My Pet Programmer <(E-Mail Removed)>

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

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

God, I love you guys.

~A!

--
Anthony Levensalor
(E-Mail Removed)

Only two things are infinite, the universe and human stupidity,
and I'm not sure about the former. - Albert Einstein
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      12-28-2007
Thomas 'PointedEars' Lahn wrote:
> Peter Michaux wrote:
>> [...] My Pet Programmer [...] wrote:
>>> 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:

>
> 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
--
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
 
 
 
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
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
How does one get an absolute absolute file path? James Byrne Ruby 3 09-14-2010 06:02 PM
Using a div with scroll bars - can we get the scroll bars on the left instead of the right side? UJ ASP .Net 1 11-01-2006 09:32 PM
Problem with CSS absolute position/overflow scroll Adam Plocher HTML 4 05-26-2006 06:10 PM
Where is Form Relative Position and Absolute Position in VS.Net 2005 ? Luqman ASP .Net 1 02-07-2006 10:27 AM



Advertisments