Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Marking Location on Click/Tap

J

jotade11

macrumors regular
Original poster
Feb 2, 2009
113
0
Hello,

I am looking into developing a web app to track and record stats for hockey goalies, allowing the user to tap on a spot on the rink where the shot was taken. I have done some Googling without success, trying to figure out what the best way to plot these points is, although I assume some sort of set of axes in JS (superimposed over an image of the rink) would be the best solution, but I was wondering if anyone has any ideas, or experience with this.

Thanks!
 
Due to numerous issues with cross browser support, it often helps to use a framework like jQuery which simplifies matters and deals with those issues. Plus, you check entire page x/y or within div's referenced by selectors. A simple x/y on page is below, otherwise visit http://docs.jquery.com/Tutorials:Mouse_Position for more examples and issues regarding this:

PHP: 
 $(document).ready(function(){
       $(document).mousemove(function(e){
          window.mouseXPos = e.pageX;
          window.mouseYPos = e.pageY;
       }); 
    });

If you prefer a native JS solution, consider this which includes the HTML so you can test it easily:

PHP: 
<html>

<script type="text/javascript">
window.onload = init;
function init() {
	if (window.Event) {
	document.captureEvents(Event.MOUSEMOVE);
	}
	document.onmousemove = getCursorXY;
}

function getCursorXY(e) {
	document.getElementById('cursorX').value = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
	document.getElementById('cursorY').value = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
}
</script>

<body>

<input type="text" id="cursorX" size="3"> X-position of the mouse cursor
<br /><br />
<input type="text" id="cursorY" size="3"> Y-position of the mouse cursor

</body>
</html>

If these don't work for you, google search using terms javascript, cursor position, caret position
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back