Get Mouse Location On Page Per Screen Resolution

[dflow]

I'm looking into how to Get mouse location on page per screen resolution.

 

for example :

I want to mark a specific point in a long article and save that location

 

thanks

[codefossa]

Here's a little example for ya. Commented it, so hopefully you can figure out everything you need. You only really need a couple lines of this to record it, but I was showing you how it could be used as well.

 

Demo: http://xaotique.no-ip.org/tmp/30/

 

HTML

<div id="page"></div>

 

Javascript

// Allow the page to load before we use our Javascript.
window.addEventListener("load", function()
{
   // Create a global array so we can read it outside of this function.
   var mouse = { x: 0, y: 0 };

   // Check for mouse movement.
   window.addEventListener("mousemove", function(event)
   {
       // Record location in array.
       mouse = { x: event.pageX, y: event.pageY };

       // This part isn't necessary.  Just to show the location for demo.
       window.document.querySelector("#page").innerHTML = mouse['x'] + ", " + mouse['y'];
   }, false);

   // Example to capture location any time.  I will do it when Y is above 500.
   var timer = setInterval(function()
   {
       // Check Y position.  Remember that (0, 0) is the top-left corner.
       if (mouse['y'] > 500)
           alert("Your mouse location is (" + mouse['x'] + ", " + mouse['y'] + ").");
   }, 100); // Checks 10 times a second.
}, false);

[codefossa]

Updated the demo and changed the action from alert to avoid the popup spam. If you were going to do this though, it would make more sense to put it inside of the movemouse function because the interval is pointless. It's just to show you that it can be used separately.

 

Now if you go above (or below, however you wanna view it), the text will change from red to green, and then back if you go below.

 

// Allow the page to load before we use our Javascript.
window.addEventListener("load", function()
{
   // Create a global array so we can read it outside of this function.
   var mouse = { x: 0, y: 0 };

   // Check for mouse movement.
   window.addEventListener("mousemove", function(event)
   {
       // Record location in array.
       mouse = { x: event.pageX, y: event.pageY };

       // This part isn't necessary.  Just to show the location for demo.
       window.document.querySelector("#page").innerHTML = mouse['x'] + ", " + mouse['y'];
   }, false);

   // Example to capture location any time.  I will do it when Y is above 500.
   var timer = setInterval(function()
   {
       // Check Y position.  Remember that (0, 0) is the top-left corner.
       window.document.querySelector("#page").style.color = mouse['y'] > 500 ? "#00FF00" : "#FF0000";
   }, 100); // Checks 10 times a second.
}, false);