Following the cursor
This work is licensed under the Creative Commons Attribution Non-Commercial 2.0 UK: England & Wales Licence. This means that you are free to: copy; distribute; and modify this work. It also means that you cannot use it for commercial purposes. Additionally, you must attribute this work to the original author, Thomas Guymer, ideally with a link.
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 which can be downloaded in the script archive, 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 the browser's window.
var pArray = new Array();
function findDrags() {
pArray = document.getElementsByTagName("p");
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";
}
}
}
else {
findDrags();
}
}
document.onmousemove = mouseMove;
Below is the source code for the CSS file which can be downloaded in the script archive, it features the style to make the box look pretty.
z-index: 3;
margin: 0em;
width: 360px;
padding: 20px;
position: fixed;
background: rgb(245,245,220);
border: 5px solid rgb(210,180,140);
}
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 |
ZIP Archive (820B)
Do you want to say 