Martin wrote:
Here's what I have in one of my pages:
Put this function in an appropriate place:
That is an invitation for flippant comments, I will resist :)
function coordinates(){window.status="X=" + (event.clientX +
window.document.body.scrollLeft) + " Y=" + (event.clientY +
window.document.body.scrollTop);}
And then this:
<body onmousemove='coordinates()'>
And a version that works on more browsers than just IE in quirks mode
might go:-
/* MoveFollow monitors mousemove events and provides an interface
to the normalised page-relative co-ordinates form those events.
It initially applies its configuration logic to account for
browser differences and then assigns a simple function to the
onmousemove property of the document. Mouse move events tend to
happen extremely rapidly and need to be processed by a quick
and simple function, but most code that needs to know the
position of the mouse does not need that information nearly as
often so it is likely to be using setTimeout, or triggered by
other events.
*/
function MoveFollow(){
var global = this;
var theOne = {
/* Returns the page relative x co-ordinate of the mouse from
the last processed event (usually a mousemove event):-
*/
getPageX:function(){
return ((readScroll.scrollLeft|0) -
(readScroll.clientLeft|0) + x);
},
/* Returns the page relative y co-ordinate of the mouse from
the last processed event (usually a mousemove event):-
*/
getPageY:function(){
return ((readScroll.scrollTop|0) -
(readScroll.clientTop|0) + y);
},
/* Returns an object with public - x- and - y - properties as
would be returned by calls to - getPageX - and - getPageY
- respectivly:-
*/
getPageXY:function(){
return {x:this.getPageX(),y:this.getPageY()};
},
/* Returns a reference to the normalised - target/srcElement -
Node from the last processed event object:-
*/
getTarget:function(){
return lastTarget;
},
/* Allows additional events to be processed by the same position
reading method, thus updating the values returned from
- getPageX - and - getPageY -. It may be used with other mouse
co-ordinate using events such as onmousedown/up to avoid having
to repeate the decision making logic elsewhere in a scirpt:-
*/
upDate:function(ev){
mm(ev);
}
};
var x = 0, y = 0;
var readScroll = {scrollTop:0,scrollLeft:0,
clientLeft:0,clientTop:0};
var lastTarget = null;
var posReadX = 'pageX';
var posReadY = 'pageY';
function mm(e){
e = e||global.event;
x = e[posReadX];
y = e[posReadY];
lastTarget = e.target||e.srcElement;
}
function initEvent(ev){
ev = ev||global.event;
if(ev){
if(typeof ev.pageX != 'number'){ //Opera 7 has pageX
posReadX = 'clientX';
posReadY = 'clientY';
if(!global.opera){ //Not an Opera browser
if((typeof document.compatMode == 'string')&&
(document.compatMode.indexOf('CSS') != -1)&&
(document.documentElement)){
readScroll = document.documentElement;
}else if(document.body){
readScroll = document.body;
}
}
}
setUpOnMouse(mm);
mm(ev);
}else{
setUpOnMouse(initEvent);
}
}
function setUpOnMouse(f){
if(document.onmousemove != f){
document.onmousemove = f;
if((document.captureEvents)&&(global.Event)&&
(document.layers)&&(typeof Layer == 'function')){
document.captureEvents(Event.MOUSEMOVE);
}
}
}
initEvent();
return ((MoveFollow = function(){return theOne;})());
};
Usage, acquire a reference to the mouse position reporting interface.
There is only one interface object so all calls to MoveFollow return a
reference to that one interface object:-
var mouseMoveInterface = MoveFollow();
Code is expected to hold on to its reference to the interface object so
that it can be re-used on subsequent calls.
Co-ordinates are read by calling methods on the interface:-
var xPos = mouseMoveInterface.getPageX();
- the returned value will be the X co-ordinate of the last mousemove
event.
Similarly:-
var yPos = mouseMoveInterface.getPageY();
The method - upDate - allows other event object to use the same code to
acquire normalised page relative co-ordinates form an event object:-
ev = ev||window.event;
mouseMoveInterface.upDate(ev);
var yPos = mouseMoveInterface.getPageY(); // yPos from - ev - event
object.
Richard.
