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!