Q: Javascript calculate the number of elements under the mouse pointer as the mouse moves Hi guys for a JS app that sits on top of a website and allow indicates to the user the depth of certain elements how would I calculate the number of divs that lie under a the mouse at a given location?
Thanks
Update
In answer to questions:


*

*jQuery or another library is fine with me.

*Haven't made a start yet, although I already have my mouse tracking code.


A: If you don't mind using jQuery -- 
Use the technique in this question -- jQuery: how do I get the element underneath my cursor? -- to trigger the update whenever the mouse moves over a new element.
Then you can use this query method -- .parents() -- to get an array of all of the parents of the element.
The number of elements will be the length of the array + 1 (the element itself).  If you don't want to count <html> and <body> then you can subtract two.

A: Using plain JavaScript is tedious sometimes. I came up with the following function to find number of divs of an element
Below is the recursive function that does the actual counting
function getNumberOfDivs(elem) {
    console.log(elem.parentNode);
    if (elem.parentNode.tagName.toLowerCase() == 'body') return 0;
    if (elem.parentNode.tagName.toLowerCase() == 'div') 
       return 1 + getNumberOfDivs(elem.parentNode);
    return getNumberOfDivs(elem.parentNode);
}

The following function uses getNumberOfDivs to find count
function getDivCount() {
    var btn = document.getElementById("btn");
    var count = getNumberOfDivs(btn);
    alert(count);
}

Hope this solves your problem of finding number of divs of a given element. 

A: I came across a solution using the document.getElementFromPoint function.  There are some cross-browser issues with getElementFromPoint, so I adapted code from http://www.zehnet.de/2010/11/19/document-elementfrompoint-a-jquery-solution/.  Ideally, we could just use that code as a plugin, but something is broken in the way he has the plugin set up.  The fundamentals of his cross-browser solution are sound, though.  Create a mousemove event handler for the base element which you wish to calculate the parents of the subelements and use the getElementFromPoint method like this:
// if the browser doesn't support getElementFromPoint, you'll need another solution 
if (typeof(document.getElementFromPoint) != 'undefined') {
    // variables to save the checked and relative status
    var check = false;
    var isRelative = true;
    $(document).mousemove(function (e) {
        // get the viewport mouse position
        var x = e.clientX;
        var y = e.clientY;

        // if we haven't checked already, check whether or not the browser users
        // viewport or page coordinates for the elementFromPoint function
        if(!check) {
            var sl;
            if((sl = $(document).scrollTop()) > 0) {
                isRelative = (document.elementFromPoint(0, sl + $(window).height() -1) == null);
            }
            else if((sl = $(document).scrollLeft()) > 0) {
                isRelative = (document.elementFromPoint(sl + $(window).width() -1, 0) == null);
            }
            check = (sl > 0);
        }

        // if the browser uses page coordinates, add in the scroll offset
        if(!isRelative) {
            x += $(document).scrollLeft();
            y += $(document).scrollTop();
        }

        // get the element at the mouse coordinates
        var element = document.elementFromPoint(x,y);

        // get number of parent elements
        var numParents = $(element).parents().length;
    });
}

This will return the number of parents of the element (excluding the element itself, and including <body> and <html>).
