Valid XHTML Icon Valid CSS Icon Valid SVG Icon Unicode UTF-8 Icon
Add to del.icio.us Digg this! Post to reddit Share on Facebook Add to StumbleUpon Add to Google Bookmarks

Following the cursor

Creative Commons LogoThis 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 foundDrags = false;
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.

.drag {
    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

This page was last modified on 20/09/2015.

Available Downloads
The Unfriendly Web

Map of total firewall denials on my servers

Update (September 2015)

This site has changed quite a lot since I bought the domain in November 2005 and first started hosting my own content. During that time the internet has evolved an awful lot; as I write this in 2015 it is almost unrecognisable to what it once was. Gone are the days of hosting your own photo albums from your holidays on your own website: now you create an album on Facebook to share with your friends and family. Got some special photos that you are particularly proud of? Then deviantART or Flickr are the places for you to showcase them. Found an interesting page and wish to share it with your friends? Twitter and Facebook will update them immediately wherever they are. Written some pieces of source code that you think other people might find useful? GitHub will version track and syntax highlight it in an instant.

Consequently, this site no longer has photo albums and panoramas taken from my travels: the special ones are in my deviantART gallery and the normal ones are on my private Facebook page. I don't have a WordPress blog at the minute so I will still keep my articles on fixing technological problems ("Releases" and "Tutorials") on here for archival - if they're useful to you then that's great. If I ever restart publishing code it'll be on my GitHub page.

I have learned a lot since I first started writing (non-public) web pages in 2002. As testimony, this site: does not set any cookies; barely has any JavaScript on it; and is no longer dynamically generated using PHP. Rather, it is completely static with updates propagated using make every midnight thanks to cron.

© 2002-2017 Thomas Guymer. See the Copyright Statement.