Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
| Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old April 18th, 2005, 01:02 PM
Registered User
Join Date: Jan 2004
Location: , , .
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Default How to get the position of an element

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?

  #2 (permalink)  
Old April 18th, 2005, 11:46 PM
Friend of Wrox
Join Date: Oct 2003
Location: Chennai, TamilNadu, India.
Posts: 326
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to Santhi Send a message via MSN to Santhi

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

  #3 (permalink)  
Old May 3rd, 2005, 07:22 PM
nzakas's Avatar
Wrox Author
Join Date: Dec 2004
Location: Peabody, MA, USA.
Posts: 217
Thanks: 0
Thanked 5 Times in 5 Posts

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:

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)
  #4 (permalink)  
Old February 2nd, 2010, 06:56 AM
Authorized User
Join Date: Jan 2010
Posts: 22
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via Yahoo to elizas
Default Getting the actual position of an element with respect to a parent element in a Silve

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.

Mindfire: India's Only Company to be both Apple Premier & Microsoft Gold certified.

Similar Threads
Thread Thread Starter Forum Replies Last Post
Problem adding element to the previous element dani1 XSLT 5 September 10th, 2008 01:38 AM
Spacing issue with Position element in IE6 socoolbrewster CSS Cascading Style Sheets 5 October 8th, 2007 02:02 PM
Position barski XSLT 5 July 11th, 2007 01:54 PM
translate element name to element name lexzeus XSLT 3 September 4th, 2006 09:04 AM
adding of element and assigning to one element sushovandatta XSLT 2 November 16th, 2004 07:04 PM

Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.