How to distinguish between blank areas and non-blank areas in a webpage with JavaScript?

Question

How to distinguish between blank areas and non-blank areas in a webpage with JavaScript? Blank areas including:

• areas that are not occupied by DOM elements.
• margins, borders and paddings of DOM elements.

EDIT:
As response to the first comment: I am working on a web-based ebook reader. Cursor is set to {cursor:move} for blank areas so that the user can drag and scroll the webpage.

Answer 1

You could recursively go through each element and attach onmouseover and onmouseout events (where the former enables the text cursor and the latter enables the move cursor) on each which has text in it, e.g:

function attachEvents(e) {
    if (n.nodeType == 3) { // Node.TEXT_NODE
        // A text node - add the parent as an element to select text in
        e.parentNode.onmouseover = elmMouseOver /* define your own event fns */
        e.parentNode.onmouseout = elmMouseOut
    }
    else if (n.nodeType == 1) { // Node.ELEMENT_NODE
        for (var m=e.firstChild; m != null; m = m.nextSibling) {
            attachEvents(m)
        }
    }
}

The best way I can think of to make sure it's actually "text" which is moused over and not a blank area is to use e.g. <div><span>content</span></div> and put the mouseover/mouseout events in the <span> so that blank areas don't trigger events. This is what I'd recommend doing if you can, as things can get very complicated if you use block elements with padding from my experience. For example:

| The quick brown fox jumps |
| over the lazy dog         | <- onmouseover/out of SPANs will ignore the space 
                                 after "dog" while DIVs won't and you won't need 
                                 to calculate padding/margins/positions which 
                                 makes it faster and more simple to implement

If you have to use block DIVs: You could use something like jQuery's jSizes plugin to get margins/padding in pixels or this (for a way to get the inherited CSS values and parse yourself by removing the px part from the end etc)

After that, you could figure out the position using position() in jQuery. I personally don't use jQuery for my stuff, but I use those specific "find positions" functions and found them to be one of the best I think in large part because of number of users testing them.

Good luck!

Answer 2

My advice would be to go for a simple scrollbar. That's far more foolproof. By trying to implement the cool drag-and-scroll feature you risk with a lot of buggy behavior in dozens of edge-cases none of us can even imagine.

If you really want to detect clicks in whitespace, you could try attaching to the onmousedown/onmouseup/onmousemove events for the page itself. JavaScript events bubble nicely, so you'll handle the whole page at once (unless it has some JavaScript in itself, in which case you're screwed anyway). These events supply both the mouse X/Y coordinates and the element that was clicked. Then you can check for padding of that element (careful with inline elements) and figure out if it's in the padding or not. You do not need to check the margin because clicking there will instead originate the click in the parent element.

Although the effect you get this way is a lot of scattered "drag-zones" that the user will have to hunt for in order to scroll the page. I doubt this will sit well with your users. Better then make the whole page "draggable", but then you will loose the ability to select text. Or do like Acrobat, which only allows grabbing in the considerable padding area of the page itself (then you should make sure that there is a considerable padding area). Which in my eyes is not much better than a scrollbar. :P