Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
Password Reminder
| FAQ | Members List | 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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Thread Tools Search this Thread Display Modes
  #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?

Reply With Quote
  #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.

Reply With Quote
  #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)
Reply With Quote
  #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.
Reply With Quote

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

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

All times are GMT -4. The time now is 04:44 AM.

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