2

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>
4
  • please see the link w3schools.com/cssref/…
    – prasanth
    Commented Feb 9, 2017 at 9:06
  • How can it be used for an animated cursor? Commented Feb 9, 2017 at 9:10
  • Why are all your semicolons missing? Commented Feb 9, 2017 at 13:22
  • It is not my code. I've already corrected at, but it does not apply to this issue. Commented Feb 9, 2017 at 13:53

1 Answer 1

1

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>
6
  • A partial solution: entrance in full-screen mode works, but the output doesn't work. Commented Feb 9, 2017 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. Commented Feb 10, 2017 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. Commented Feb 11, 2017 at 4: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. Commented Feb 11, 2017 at 8: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 ... Commented Feb 11, 2017 at 8:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.