473,372 Members | 1,606 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,372 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 10054


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...
1
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: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

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.