JavaScript: incorrect mouse coords (pageX and pageY in fullscreen mode)

Question

I create JavaScript for get mouse coords.

Script for show image by mouse coords (animated cursor script (с) Zac Ang Eng Keat):

<html>
<head>
<title>Cursor</title>
<script type="text/javascript">
document.body.style.cursor = 'none';
var trailimage=["http://2aek.com/images/cursors/cur1.gif", 32, 32] //image path, plus width and height
var offsetfrommouse=[0,0] //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0 //duration in seconds image should remain visible. 0 for always.

if (document.getElementById || document.all)
document.write('<div id="trailimageid" style="position:absolute;visibility:visible;left:0px;top:0px;width:1px;height:1px"><img src="'+trailimage[0]+'" border="0" width="'+trailimage[1]+'px" height="'+trailimage[2]+'px"></div>')

function gettrailobj(){
if (document.getElementById)
return document.getElementById("trailimageid").style
else if (document.all)
return document.all.trailimagid.style
}

function truebody(){
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function hidetrail(){
gettrailobj().visibility="hidden"
document.onmousemove=""
}

function followmouse(e){
var xcoord=offsetfrommouse[0]
var ycoord=offsetfrommouse[1]

xcoord+=e.pageX
ycoord+=e.pageY

var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)
if (xcoord+trailimage[1]+3>docwidth || ycoord+trailimage[2]> docheight)
gettrailobj().display="none"
else
gettrailobj().display=""
gettrailobj().left=xcoord+"px"
gettrailobj().top=ycoord+"px"
}

document.onmousemove=followmouse
if (displayduration>0)
setTimeout("hidetrail()", displayduration*1000)
</script>
</head>
<body>
Press F11 (make the browser window full screen) in Firefox
</body>
</html>

But, it have some problem: if in Firefox I changed fullscreen mode, image get incorrect coords.

I tried to use screenX and screenY instead pageX and pageY, but it need to somehow get moment of change fullscreen mode.

Update:

<html>
<head>
<title>Cursor</title>
<script type="text/javascript">
var isFirefox = (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) || (typeof InstallTrigger !== 'undefined');

function isFullScreen() { //helper func to detect if Firefox is in fullscreen
  if (window['fullScreen'] !== undefined) return window.fullScreen; //Firefox support this property
  return (screen.width == window.innerWidth) && (window.screenY == 0 || window.screenTop == 0) && Math.abs(screen.height - window.innerHeight) < 45;
}

document.body.style.cursor = 'none';
var trailimage = ["http://2aek.com/images/cursors/cur1.gif", 32, 32] //image path, plus width and height 
var offsetfrommouse = [0, 0] //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration = 0 //duration in seconds image should remain visible. 0 for always.

if (document.getElementById || document.all)
  document.write('<div id="trailimageid" style="position:absolute; visibility:visible; left:0px; top:0px; width:1px; height:1px"><img src="' + trailimage[0] + '" border="0" width="' + trailimage[1] + 'px" height="' + trailimage[2] + 'px"></div>')

function gettrailobj() {
  if (document.getElementById)
    return document.getElementById("trailimageid").style;
  else if (document.all)
    return document.all.trailimagid.style;
}

function truebody() {
  return (!window.opera && document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body;
}

function hidetrail() {
  gettrailobj().visibility = "hidden";
  document.onmousemove = "";
}

var last_screenX = -1, last_screenY = -1;
var deltaX = 0, deltaY = 0;

function followmouse(e) {

  var xx = e.pageX, yy = e.pageY;

  if (isNaN(xx) && isFirefox) { //its called from window_resize
    //if (isFullScreen()) 
    xx = last_screenX + window.scrollX;
    yy = last_screenY + window.scrollY;
    if (!isFullScreen()) { //exit from fullscreen 
      //alert("exit");
      xx -=  deltaX;
      yy -= deltaY;
    }
  }

  //msg.innerHTML = "clientY: "+e.clientY+", pageY: "+e.pageY+", scrnY: "+e.screenY+", win.screenY: "+window.screenY;

  var xcoord = xx + offsetfrommouse[0];
  var ycoord = yy + offsetfrommouse[1];

  var docwidth = document.all ? truebody().scrollLeft + truebody().clientWidth : pageXOffset + window.innerWidth - 15;

  var docheight = document.all ? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight);

  if (xcoord + trailimage[1] + 3 > docwidth || ycoord + trailimage[2] > docheight)
    gettrailobj().display = "none";
  else
    gettrailobj().display = "";

  gettrailobj().left = xcoord + "px";
  gettrailobj().top = ycoord + "px";

  if (!isNaN(e.screenX)) {
    last_screenX = e.screenX;
    last_screenY = e.screenY;
  }

  if((e.screenY - e.clientY) > 5) { //not fullscreen. (in fullscreen it is 0 or 1)
    deltaX = e.screenX - e.clientX;
    deltaY = e.screenY - e.clientY;
  }
}

document.onmousemove = followmouse;
window.onresize = followmouse;  // *** new event handler is add

if (displayduration > 0)
  setTimeout("hidetrail()", displayduration * 1000);
</script>
</head>
<body>
Press F11 (make the browser window full screen) in Firefox
</body>
</html>

please see the link http://www.w3schools.com/cssref/playit.asp?filename=playcss_cursor&preval=url(smiley.gif),url(myBall.cur),auto — prasanth, Feb 09 '17 at 09:06
It is not my code. I've already corrected at, but it does not apply to this issue. — Alexan-Dwer, Feb 09 '17 at 13:53

S.Serpooshan · Accepted Answer · 2017-02-11T09:43:12.687

You should add onresize event handler to check if user enters into full screen mode and calculate the new position of mouse in this case. Also, when user exits from fullscreen, we should recalculate its position. i draw some figures and find the conversion formulas as following:

//when enter to FullScreen:
xx = last_screenX + window.scrollX;
yy = last_screenY + window.scrollY;

//when Exit from FullScreen:
xx = last_screenX + (e.screenX - e.clientX) + window.scrollX
yy = last_screenY + (e.screenY - e.clientY) + window.scrollY

window.scrollX and window.scrollY are required when your page contains scrollbars.

So, the final code will be like as this:

<html>
<head>
  <title>Cursor</title>
</head>
<body>
  <script type="text/javascript">
  var isFirefox = (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) || (typeof InstallTrigger !== 'undefined');

  function isFullScreen() { //helper func to detect if Firefox is in fullscreen
    if (window['fullScreen'] !== undefined) return window.fullScreen; //Firefox support this property
    return (screen.width == window.innerWidth) && (window.screenY == 0 || window.screenTop == 0) && Math.abs(screen.height - window.innerHeight) < 45;
  }

  document.body.style.cursor = 'none';
  var trailimage = ["http://2aek.com/images/cursors/cur1.gif", 32, 32]; //image path, plus width and height
  var offsetfrommouse = [-10, -5]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset. also try [-10, -5]
  var displayduration = 0; //duration in seconds image should remain visible. 0 for always.

  if (document.getElementById || document.all)
    document.write('<div id="trailimageid" style="position:absolute; visibility:visible; display:none; left:0px; top:0px; width:1px; height:1px"><img src="' + trailimage[0] + '" border="0" width="' + trailimage[1] + 'px" height="' + trailimage[2] + 'px"></div>')

  function gettrailobj() {
    if (document.getElementById)
      return document.getElementById("trailimageid").style;
    else if (document.all)
      return document.all.trailimagid.style;
  }

  function truebody() {
    return (!window.opera && document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body;
  }

  function hidetrail() {
    gettrailobj().visibility = "hidden";
    document.onmousemove = "";
  }

  var last_screenX = -1, last_screenY = -1;
  var deltaX = 0, deltaY = 0;

  var trail = gettrailobj();
  var tbody = truebody();

  function followmouse(e) {

    var xx = e.pageX, yy = e.pageY;

    if (isNaN(xx) && isFirefox) { //its called from window_resize
      //if (isFullScreen()) 
      xx = last_screenX + window.scrollX;
      yy = last_screenY + window.scrollY;
      if (!isFullScreen()) { //exit from fullscreen 
        //alert("exit");
        xx -=  deltaX;
        yy -= deltaY;
      }
    }

    //msg.innerHTML = "clientY: "+e.clientY+", pageY: "+e.pageY+", scrnY: "+e.screenY+", win.screenY: "+window.screenY;

    var xcoord = xx + offsetfrommouse[0];
    var ycoord = yy + offsetfrommouse[1];

    var docwidth = document.all ? tbody.scrollLeft + tbody.clientWidth : pageXOffset + window.innerWidth - 15;
    var docheight = document.all ? Math.max(tbody.scrollHeight, tbody.clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight);

    trail.display = (xcoord + trailimage[1] + 3 > docwidth || ycoord + trailimage[2] > docheight) ? "none" : "";

    trail.left = xcoord + "px";
    trail.top = ycoord + "px";

    if (!isNaN(e.screenX)) {
      last_screenX = e.screenX;
      last_screenY = e.screenY;
    }

    if((e.screenY - e.clientY) > 5) { //not fullscreen. (in fullscreen it is 0 or 1)
      deltaX = e.screenX - e.clientX;
      deltaY = e.screenY - e.clientY;
    }
  }

  document.onmousemove = followmouse;
  window.onresize = followmouse;  // *** new event handler is add

  if (displayduration > 0)
    setTimeout("hidetrail()", displayduration * 1000);

  </script>

  <div>Press F11 (make the browser window full screen) in Firefox</div>

</body>
</html>

A partial solution: entrance in full-screen mode works, but the output doesn't work. — Alexan-Dwer, Feb 09 '17 at 15:17
I add your code in question, but if I save it to HTML page, and open in Firefox, JavaScript doesn't work. Please, check in your browser in local HTML file. — Alexan-Dwer, Feb 10 '17 at 20:22
i tested it and ensure its working properly. probably you made some mistake when copy-paste the js code, i edit the answer to show full html source of the page to be saved as a .html file. please try it and give feedback. — S.Serpooshan, Feb 11 '17 at 04:56
You're right. Now, save the file from the response it works. Only have two bad points. First, refresh the page the cursor is drawn wrong as long as the mouse will not be affected. Second, if the at first to open in full-screen mode, and then get out of it, it is also the cursor is drawn not correct at the time of exit. — Alexan-Dwer, Feb 11 '17 at 08:20
I upvote your answer. Because you have done a lot. Also, I will try to find answers on the remaining points. If I will find them, I will add a comment ... — Alexan-Dwer, Feb 11 '17 at 08:20
i think its not possible to get initial mouse position without any events: see [this post](http://stackoverflow.com/q/2601097) and [this post](http://stackoverflow.com/q/10789044)! But i updated the code and add `display:none;` to `document.write(' — S.Serpooshan, Feb 11 '17 at 09:26

JavaScript: incorrect mouse coords (pageX and pageY in fullscreen mode)

1 Answers1

Linked