Marking Location on Click/Tap

Discussion in 'Web Design and Development' started by jotade11, Sep 21, 2012.

  1. jotade11 macrumors regular

    Joined:
    Feb 2, 2009
    #1
    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!
     
  2. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #2
    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
     

Share This Page