Entry
How to get the page coordinates of a HTML element?
How to get the page coordinates of a HTML element?
Mar 24th, 2009 20:17
chat alarab, Yuriy Fuksenko, ralf bokelberg, Martin Honnen,
NN4 allows that only for positioned elements where you use
document['elementID'].pageX
document['elementID'].pageY
respectively the correct layer reference (for nested layers) plus the
pageX/pageY property. Note that that means by wrapping your element in
a relatively positioned element you can find its position. See below.
NN4 also has undocumented
x
and
y
properties for the IMG and A elements.
(Attention NN4: if you only want to get the position of a html
element, you can place a transparent 1 pixel gif in front of it,
and retrieve its position via document.images[myImg].x and .y )
IE4/5 provides computed coordinates with
offsetLeft
offsetTop
but these are relative to the containing element so you have to climb
up the document tree adding these properties:
function getOffsetLeft (el) {
var ol = el.offsetLeft;
while ((el = el.offsetParent) != null)
ol += el.offsetLeft;
return ol;
}
function getOffsetTop (el) {
var ot = el.offsetTop;
while((el = el.offsetParent) != null)
ot += el.offsetTop;
return ot;
}
Example use:
function showImageCoordinates (image) {
var x = getOffsetLeft(image);
var y = getOffsetTop(image);
alert(x + ':' + y);
}
<P ALIGN="center">
Kibology for all.
<IMG SRC="whatever.gif"
ONCLICK="showImageCoordinates(this);"
>
</P>
As indicated with NN4 you can wrap your element into a relatively
positioned element to be able to measure the position:
<HTML>
<HEAD>
<STYLE>
.measurable { position: relative; }
</STYLE>
<SCRIPT>
</SCRIPT>
</HEAD>
<BODY>
<A HREF="javascript: var t = document.aTableContainer;
alert('position: ' + t.pageX + ':' + t.pageY);
alert('dimensions: ' + t.clip.width + ':' + t.clip.height);
void 0"
>
show table position and dimension
</A>
<TABLE>
<TR>
<TD>
Some text
</TD>
<TD>
<SPAN ID="aTableContainer" CLASS="measurable">
<TABLE BORDER="1">
<TR>
<TD>
Kibology
</TD>
</TR>
</TABLE>
</SPAN>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
There is a problem with the methods provided - they don't take into
account the fact, that some of the parrent element can have scrollbars
and be scrolled. The following are simple implementations, that works
in IE5+ and NS6+.
var _tpNS = (document.all)?false:true;
function getOffsetLeft (el) {
var sl = el;
var ol = el.offsetLeft;
var sh = 0;
while ((el = el.offsetParent) != null){
ol += el.offsetLeft;
if(el.offsetParent && el.offsetParent.offsetParent){
var scrollLeft = el.offsetParent.scrollLeft;
if(!isNaN(scrollLeft)){
sh -= scrollLeft;
}
}
}
el = sl;
if(_tpNS){
while((el = el.parentNode) != null){
if(el.parentNode && el.parentNode.parentNode
&& !(el.parentNode.tagName &&
el.parentNode.tagName.toUpperCase() == "BODY")){
var scrollLeft = el.parentNode.scrollLeft;
if(!isNaN(scrollLeft) && scrollLeft > 0 ){
sh -= scrollLeft;
}
}
}
}
return ol+sh;
}
function getOffsetTop (el) {
var ot = el.offsetTop;
var sl = el;
var sh = 0;
while((el = el.offsetParent) != null){
ot += el.offsetTop;
if(el.offsetParent && el.offsetParent.offsetParent){
var scrollTop = el.offsetParent.scrollTop;
if(!isNaN(scrollTop)) sh -= scrollTop;
}
}
el = sl;
if(_tpNS){
while((el = el.parentNode) != null){
if(el.parentNode && el.parentNode.parentNode
&& !(el.parentNode.tagName &&
el.parentNode.tagName.toUpperCase() == "BODY")){
var scrollTop = el.parentNode.scrollTop;
if(!isNaN(scrollTop) && scrollTop > 0 ){
sh -= scrollTop;
}
}
}
}
return ot + sh;
}
http://www.ksa-123.com
http://www.ksa-2000.com
http://www.chat-kuwait.com
http://www.vip-kuwait.com
http://www.chat-3rb.com
http://www.vip-3rb.com
http://www.3rb-chat.com
http://www.vipgulf.com
http://www.chat-gulf.com
http://www.vip-gulf.com
