Finding the offset client position of an element

Question

Hi all,

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?

Thanks,

datte

Answer 1

If you care about using JQuery, check this : http://docs.jquery.com/CSS/offset

Answer 2

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.