How to get the position of an element

nazran · April 18th, 2005, 01:02 PM

I need to get the co-ordinate (x,y) of an element on browser. Like I'm using a DIV in a table cell. When the browser is resizing then it is changing the position itself. Then I need to know the position. I am trying to show a dynamic & coustomize tip on top of it.

Any body can help me?

Santhi · April 18th, 2005, 11:46 PM

Use offsetX and offsetY.This will return the x and y coordinates of the element with respect to the position.

nzakas · May 3rd, 2005, 07:22 PM

offsetX and offsetY are only present on the event object. You really want to use offsetLeft and offsetTop, but those only give you the coordinates relative to its parent element. You need to use these values to calculate the actual left and top:

Code:

function getActualLeft(oElement) {

    var iLeft = 0;
    var oNode = oElement;

    while (oNode != document.body) {
        iLeft += oNode.offsetLeft;
        oNode = oNode.offsetParent;
    }

    return iLeft;
}

This adds up all the offsetLeft values of all the parent nodes to determine the actual left.

You can use the same algorithm to find the top coordinate as well.

Nicholas C. Zakas
Author, Professional JavaScript for Web Developers (ISBN 0764579088)
http://www.nczonline.net/

elizas · February 2nd, 2010, 06:56 AM

There are instances when we need the exact position of an UIElement in a silverlight application.An instant solution that comes to the mind is getPosition() of the MouseEventArgs.

But there are situations when this might not work.
Suppose I have a xaml page named Master.xaml.In that particular page I am using a menu which is again another xaml page say Menu.xaml.Both the pages have their layout container Grid,say. Now suppose inside the grid(layoutcontainer)of menu.xaml I am using number of grids to show each menu item.

What my need is I want to get the exact position of the grid for menu item but with respect to the screen ie the grid(layout container) of Master.xaml.
If I fire the MouseEventArgs for that particular grid and use the getPosition() than what I will get is (0,0) again if I use the getPosition() of grid of Master.xaml than I have to handle everything from Master.xaml which will further lead to event bubbling.So what is the better solution...............................?
Here comes GeneralTransform class comes in to the picture.
In order to get the actual position of an UIElement(in this case the grid used for menu item) in relation to a parent element(the layout grid of Master.xaml) we can use this one

GeneralTransform gt=((UIElement)childelement).TransformToVisual(par entelement);
Point p=gt.Tranform(new Point(0,0));

now p.x and p.y will give the x and y coordinate of the grid for menu.
I hope it did add some value and it was quite informative.Any suggestions are welcomed.
Thanks
Eliza