Been working on a web application that tries to present a relatively rich user interface. As a target I am aiming at the current and near/mid future population of browsers. That means IE 6 (and later), Mozilla/Firefox, and trying to stick as much as possible with the W3C standards (HTML 4.01, CSS 2, Javascript 1.5). This does not mean Netscape 4.x support, and I am not testing with Opera or Safari.

So far I have covered some fairly exacting layouts, resizable dialogs (with layout changes), Java/Javascript integration, tooltips, and other interesting bits, all without explicit browser detection, using fairly minimal, clean, largely standards-compliant code.

In the process of implementing drag and drop, I got hung up trying to make some sort of coherent sense of mouse tracking. In fact I already had code that worked (derived from various samples on the net), or at least seemed to work, but … I am not at all sure that this indeed covers all cases.

Put up an example page with mouse tracking over a variety of positioned elements.

The core bit of code is pretty simple.

    document.onmousemove = function(e) {
        e = e || event
        var o = e.srcElement || e.target
        var x = e.clientX
        var y = e.clientY
        while (null != o.scrollTop) {
            x += o.scrollLeft
            y += o.scrollTop
            o = o.parentNode
        }
        window.track.style.left = x + "px"
        window.track.style.top  = y + "px"
    }

This code seems to work correctly with IE6 and Firefox. It would be nice to know if this code works in Safari and Opera. It would be useful to know if there are cases were this code does not work.