PDA

View Full Version : Get x,y Coordinates of a SPAN/DIV tag?


blackf0rk
July 21st, 2006, 06:43 PM
Is there a way with HTML DOM (or any other means) that I can get the x,y coordinates of a SPAN or DIV tag? Preferrably the SPAN tag. I don't need the whole code, just the HTML DOM class reference or something.:ear:
noTime
July 21st, 2006, 06:49 PM
Read this: http://www.faqts.com/knowledge_base/view.phtml/aid/1001
blackf0rk
July 24th, 2006, 08:36 PM
Thank you noTime. To show my appreciation I am posting my results that work in FireFox and IE6, for my specific example:


<html>
<style type="text/css">
<!--
#layer {
position:absolute;
left:161px;
top:114px;
width:258px;
height:268px;
z-index:1;
visibility: hidden;
}
-->
</style>

<!-- BEGIN MOUSE OVER AND MOUSEOUT CODE -->
<script type="text/JavaScript">
<!--
function showLayer() {
//THIS GETS THE POSITION OF THE SPAN TAG:
spanX = document.getElementById("theSpan").offsetLeft;
spanY = document.getElementById("theSpan").offsetTop;

//THIS MOVES THE LAYER TO THE COORDINATES LOADED INTO THE SPANX/Y VARS:
document.getElementById("layer").style.left=spanX;
document.getElementById("layer").style.top=spanY+20;

//NOW WE SHOW THE LAYER:
MM_showHideLayers('layer','','show')
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
<!-- END MOUSEOVER/OUT CODE -->

<body>
<div id="layer">
<table width="100%" height="100%" border="0" cellpadding="10" cellspacing="0" bgcolor="#FFFF00">
<tr>
<td>&nbsp;</td>
</tr>
</table>
</div>
<p><span id="theSpan"><a href="#" onMouseOver="showLayer()" onMouseOut="MM_showHideLayers('layer','','hide')">mouse0vr me!</a></span></p>
</body>
</html>

Thanks again, and I hope someone else will find this useful if their searching :)