Question

Setup

---

I’m making an HTML page that replaces the cursor with a div element. The Javascript is below. The div element is simply <div id="cursor"/>.

function fixCursor()
{
  var cPos = getCursorPosition();
  cursor.style="top:" + (cPos.y) + "; left:" + (cPos.x) + "; position:fixed; width:16px; height:16px; background-color:#DDDDDD; box-shadow: 2px 2px 4px rgba(0,0,0,.5); border:2px solid #111111; border-radius:0 100% 100% 100%;";
  return;
}

function getCursorPosition(e) {
    e = e || window.event;
    var cursor = {x:0, y:0};
    if (e.pageX || e.pageY) {
        cursor.x = e.pageX;
        cursor.y = e.pageY;
    }
    else if (e.screenX || e.ecreenY) {
        cursor.x = e.screenX;
        cursor.y = e.screenY;
    }
    else if (e.x || e.y) {
        cursor.x = e.x;
        cursor.y = e.y;
    }
    else if (e.clientX || e.clientY) {
        var de = document.documentElement;
        var b = document.body;
        cursor.x = e.clientX;
        cursor.y = e.clientY;
    }
    return cursor;
}

Problem

---

This only works on Opera, and shows signs of working on IE, but doesn’t show the cursor. On Firefox and Chrome, nothing appears. I haven’t tried Safari, as I uninstalled it a while ago, but in my experience, its rendering works alot like Chrome, anyway.

Answer 1

In your code, getCursorPosition takes an event object, e. In fixCursor, you are not passing anything in. You should probably make fixCursor take an event object as well and pass it through to getCursorPosition. Then, in your event handler where you’re presumably calling fixCursor, pass in the event object passed into your event handler.

Also, you cannot set style equal to a string. You can, however, set style.cssText.