Follow The Cursor

metadata

Here I am testing to see if a box can follow a cursor around the screen using JavaScript and CSS. Give it a try and see what happens. Below, I go through the source code for you and my usability findings.

Some random text.

Below is the source code for the JavaScript file, it features the mouse coordinate functions. It may be more complicated than other examples which can be found on the internet but you’ll see that this script does not use browser profiling and it also switches the position of the box if it thinks that some of the box will be outside of the browser’s window.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 

var foundDrags = false;
var pArray = new Array();
var imgArray = new Array();

function findDrags() {
    pArray = document.getElementsByTagName("p");
    imgArray = document.getElementsByTagName("img");
    foundDrags = true;
}

var gap = 20;
var pBorder = 5;
var pWidth = 400; // Padding + Width

function mouseMove(event) {
    if(!event) {
        event = window.event // Required for IE
    }
    mousex = event.clientX;
    mousey = event.clientY;
    if(window.innerWidth) {
        windowx = window.innerWidth;
    }
    else {
        windowx = document.body.offsetWidth; // Fallback for IE
    }
    if(foundDrags) {
        for(i=0; i<pArray.length; i=i+1) {
            if(pArray[i].className == "drag") {
                if((mousex + gap + pBorder + pWidth + pBorder + gap) < windowx) {
                    pArray[i].style.left = (mousex + gap) + "px";
                }
                else {
                    pArray[i].style.left = (mousex - pBorder - pWidth - pBorder - gap) + "px";
                }
                pArray[i].style.top = mousey + "px";
            }
        }
        for(i=0; i<imgArray.length; i=i+1) {
            if(imgArray[i].className == "drag") {
                if((mousex + gap + gap + imgArray[i].width) < windowx) {
                    imgArray[i].style.left = (mousex + gap) + "px";
                }
                else {
                    imgArray[i].style.left = (mousex - imgArray[i].width - gap) + "px";
                }
                imgArray[i].style.top = mousey + "px";
            }
        }
    }
    else {
        findDrags();
    }
}

document.onmousemove = mouseMove;
You may also download “follow-the-cursor.js” directly or view “follow-the-cursor.js” on GitHub Gist (you may need to manually checkout the “main” branch).

Below is the source code for the CSS file, it features the style to make the box look pretty.

1
2
3
4
5
6
7
8
9
 

.drag {
    z-index: 3;
    margin: 0em;
    width: 360px;
    padding: 20px;
    position: fixed;
    background: rgb(245,245,220);
    border: 5px solid rgb(210,180,140);
}
You may also download “follow-the-cursor.css” directly or view “follow-the-cursor.css” on GitHub Gist (you may need to manually checkout the “main” branch).

Doing my own tests I have found that:

Browser Box follows cursor?
Firefox 3 Yes
IE7 Yes
IE8 Beta 2 Yes
Konqueror 3.5 Yes
Opera 9.5 Yes
Safari 3.1 Yes