473,545 Members | 2,797 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

browser window coordinates

Is there a method in JavaScript that will detect and return the coordinates
of a mouse click? For example, if someone clicked the mouse within the
browser window, the method would return (453,125), or something similar. I
guess another way to ask this would be, is there a way to image map the
entire browser display as a whole?
--
Thomas J. Storm
Jul 23 '05 #1
2 3139
Here's what I have in one of my pages:

Put this function in an appropriate place:
function coordinates(){w indow.status="X =" + (event.clientX +
window.document .body.scrollLef t) + " Y=" + (event.clientY +
window.document .body.scrollTop );}

And then this:
<body onmousemove='co ordinates()'>

On Tue, 17 Aug 2004 19:07:12 -0400, "Thomas Storm" <us**@network.n et>
wrote:
Is there a method in JavaScript that will detect and return the coordinates
of a mouse click? For example, if someone clicked the mouse within the
browser window, the method would return (453,125), or something similar. I
guess another way to ask this would be, is there a way to image map the
entire browser display as a whole?


Jul 23 '05 #2
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(){w indow.status="X =" + (event.clientX +
window.document .body.scrollLef t) + " Y=" + (event.clientY +
window.document .body.scrollTop );}

And then this:
<body onmousemove='co ordinates()'>


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:functi on(){
return ((readScroll.sc rollLeft|0) -
(readScroll.cli entLeft|0) + x);
},
/* Returns the page relative y co-ordinate of the mouse from
the last processed event (usually a mousemove event):-
*/
getPageY:functi on(){
return ((readScroll.sc rollTop|0) -
(readScroll.cli entTop|0) + y);
},
/* Returns an object with public - x- and - y - properties as
would be returned by calls to - getPageX - and - getPageY
- respectivly:-
*/
getPageXY:funct ion(){
return {x:this.getPage X(),y:this.getP ageY()};
},
/* Returns a reference to the normalised - target/srcElement -
Node from the last processed event object:-
*/
getTarget:funct ion(){
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,sc rollLeft:0,
clientLeft:0,cl ientTop: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.src Element;
}
function initEvent(ev){
ev = ev||global.even t;
if(ev){
if(typeof ev.pageX != 'number'){ //Opera 7 has pageX
posReadX = 'clientX';
posReadY = 'clientY';
if(!global.oper a){ //Not an Opera browser
if((typeof document.compat Mode == 'string')&&
(document.compa tMode.indexOf(' CSS') != -1)&&
(document.docum entElement)){
readScroll = document.docume ntElement;
}else if(document.bod y){
readScroll = document.body;
}
}
}
setUpOnMouse(mm );
mm(ev);
}else{
setUpOnMouse(in itEvent);
}
}
function setUpOnMouse(f) {
if(document.onm ousemove != f){
document.onmous emove = f;
if((document.ca ptureEvents)&&( global.Event)&&
(document.layer s)&&(typeof Layer == 'function')){
document.captur eEvents(Event.M OUSEMOVE);
}
}
}
initEvent();
return ((MoveFollow = function(){retu rn 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 mouseMoveInterf ace = 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 = mouseMoveInterf ace.getPageX();

- the returned value will be the X co-ordinate of the last mousemove
event.

Similarly:-

var yPos = mouseMoveInterf ace.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.even t;
mouseMoveInterf ace.upDate(ev);
var yPos = mouseMoveInterf ace.getPageY(); // yPos from - ev - event
object.

Richard.


Jul 23 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
2206
by: Suresh Kumar | last post by:
Hi, In Tkinter, how to convert canvas coordinates to window coordinates? To convert window coordinates to canvas coordinates we are using "canvasx,canvasy". But how to do vice-versa? Iam using a canvas whose size is larger than screen size and drawn a rectagnle in the middle of canvas. When i select the rectangle i got its coordinates in...
0
1626
by: Suresh Kumar | last post by:
Hi, In Tkinter, how to convert canvas coordinates to window coordinates? To convert window coordinates to canvas coordinates we are using "canvasx,canvasy". But how to do vice-versa? With Regards, V.Suresh Kumar. ___________________________________________________ Click below to experience Sooraj R Barjatya's latest offering 'Main Prem...
4
561
by: Altramagnus | last post by:
I have 30 - 40 type of different window. For each type I need about 20 instances of the window. When I try to create them, I get "Error creating window handle" My guess is there is a maximum number of window handle, because if I reduce to about 2 instances of each window, it can run. But not 20 instances of each window. Does anyone know...
20
7884
by: Mandy Memphis | last post by:
If I perform a mousedown within a document, move the mouse outside the browser window, and then release the mouse button, the document.onmouseup event does not fire. Is there any way to detect a mouseup event outside the document? Also, how can I get the relative coordinates of the cursor while it is outside the browser? Thank you.
4
6377
by: alexandre.brisebois | last post by:
Hi, I am using access 2003, I would like to know if there is an option to reorganize the tables in a maner that is readable, as we can do in sql sever 2000 or 2005. I have been given a database to look a and I am loosing tremendious amounts of time trying to organize it so that I could view it. Regards, Alexandre Brisebois
1
4120
by: igpig | last post by:
Sorry if this has been asked before. I've searched the group and the FAQ and didn't find the answer. How can I retrieve x, y coordinates of the browser top left corner in Internet Explorer? In Firefox screenX/screenY are working as expected. In IE, from MSDN : screenLeft Retrieves the x-coordinate of the upper left-hand corner of
1
1868
by: Dave | last post by:
I'm running the below script to open a popup window. Works great! How Can I get "Mouse Coordinates" (X,Y) to include them as Left and Top parameters so that the popup window opens "where the button was clicked"? protected void btnLocateEmpID_Click(object sender, EventArgs e) { StringBuilder sb = new StringBuilder();...
0
938
by: a4andy | last post by:
Hi, This has got me pulling my hair out, all I want to do is get the cursor position within a client window in the same units as the window coordinates. If I use; Private Declare Function GetClientRect Lib "user32" (ByVal hwnd As Integer, ByRef lpRect As RECT) As Integer to get the coordinates of the client window and;
0
7502
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7692
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
7946
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7457
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
1
5360
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
3491
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
1
1921
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1045
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
744
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.