473,320 Members | 1,949 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Distance between an element and the top of the page

Hi,

I got an element ( say <div id="foo">... ) at its natural position in a
page.
I need to get the distance (in pixels) between the top of that element and
the top of the page/frame.
Of course, I'd prefer this to work with IE and Mozilla family.

Many thanks in advance.

--Gilles

Jul 20 '05 #1
1 10038


Gilles Lenfant wrote:
Hi,

I got an element ( say <div id="foo">... ) at its natural position in a
page.
I need to get the distance (in pixels) between the top of that element and
the top of the page/frame.
Of course, I'd prefer this to work with IE and Mozilla family.


With Netscape 6+, IE4+ and (at least) Opera 6+ any element object has
properties
offsetLeft
offsetTop
offsetParent
where the first two give you the coordinates relative to the last, the
offsetParent. If you add offsetLeft/offsetTop along the offsetParent
hierarchy you get the page coordinates of the element:
function getPageCoords (element) {
var coords = { x: 0, y: 0};
while (element) {
coords.x += element.offsetLeft;
coords.y += element.offsetTop;
element = element.offsetParent;
}
return coords;
}
function getElementObject (elementId) {
if (document.all)
return document.all[elementId];
else if (document.getElementById)
return document.getElementById(elementId);
else
return null;
}
var coords = getPageCoords(getElementObject('elementId'));
alert(coords.x + ':' + coords.y)
Make sure you call getPageCoords after the page has been loaded

--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 20 '05 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

20
by: Xenophobe | last post by:
I have successfully converted the ASP code included in the following article to PHP: http://www.4guysfromrolla.com/webtech/040100-1.shtml As described the high and low latitudes and longitudes...
4
by: Xenophobe | last post by:
I have successfully created a zip code radius search, but the performance is unacceptable. I have two tables. The first is 52K zip codes w/lat and long. The second is 3K national business...
7
by: qwerty | last post by:
Following works in Mozilla, Opera and IE. <div style=" left: 100px; right: 200px; /* JavaScript-hack for IE*/ width: expression((document.body.clientWidth - 100 - 200) + 'px') ">...
14
by: Wim Roffil | last post by:
Hi, Is there a way to set the distance between the items in a list that I can put in the <ul> or <ol> tag? I suppose that using margin in the <li> tag will work but the endless repetition...
10
by: Alan Johnson | last post by:
24.1.1.3 says about InputIterators: Algorithms on input iterators should never attempt to pass through the same iterator twice. They should be single pass algorithms. In 24.3.4.4 summarizes the...
11
by: Dirntknow | last post by:
Further to my recent post in this newsgroup i've got to admit i'm struggling. I've no experience with javascript or it's workings. What i'd like is a simple converter to allow a user to input the...
9
by: nottheartistinquestion | last post by:
As an intellectual exercise, I've implemented an STL-esque List<and List<>::Iterator. Now, I would like a signed distance between two iterators which corresponds to their relative position in the...
1
by: tiffrobe | last post by:
I'm a little lost on my program. Everything works fine except function 3. It gives out garbage numbers. Its suppose to give the distance between two points and then the area of 2 circles. ...
11
by: devnew | last post by:
hello while trying to write a function that processes some numpy arrays and calculate euclidean distance ,i ended up with this code (though i used numpy ,i believe my problem has more to do with...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.