Finding the offset client position of an element

Question

How to find the offset client position of an element using Javascript? (I assume the same code can be written in a BHO or Gecko/NPAPI).

The problem I am facing is a way to find out the offset client position of the element. The e.srcElement.offsetX/Y does not give the correct value always (same goes for clientX/Y). In some cases we also need to consider the parent element scroll.

How do we do this in general? Is there an easy way for this?

Answer 1

function getElementTop ( Elem ) 
{
    var elem;

    if ( document.getElementById ) 
    {   
        elem = document.getElementById ( Elem );
    } 
    else if ( document.all ) 
    {
        elem = document.all[Elem];
    }           

    yPos = elem.offsetTop;
    tempEl = elem.offsetParent;

    while ( tempEl != null ) 
    {
        yPos += tempEl.offsetTop;
        tempEl = tempEl.offsetParent;
    }  

    return yPos;
}   


function getElementLeft ( Elem ) 
{
    var elem;

    if ( document.getElementById ) 
    {
        var elem = document.getElementById ( Elem );
    } 
    else if ( document.all )
    {
        var elem = document.all[Elem];
    }           

    xPos = elem.offsetLeft;
    tempEl = elem.offsetParent;         

    while ( tempEl != null ) 
    {
        xPos += tempEl.offsetLeft;
        tempEl = tempEl.offsetParent;
    }           
    return xPos;
}

Pass the element id to the functions.