Entry
Can I determine whether on a certain position on the page (x,y) there is or is not an object (id)?
Jan 10th, 2003 08:47
Klaus Bolwin, Frank Marek,
In Mozilla based browsers you can use the following code:
element = document.getElementsByTagName("*");
iselement = false;
for (i=0; i<element.length; i++)
{
left = document.defaultView.getComputedStyle(element[i],
'').getPropertyValue("left"); left=parseInt(left);
rightt = document.defaultView.getComputedStyle(element[i],
'').getPropertyValue("width"); right=left + parseInt(rightt);
top = document.defaultView.getComputedStyle(element[i],
'').getPropertyValue("top"); top=parseInt(top);
bottomm = document.defaultView.getComputedStyle(element[i],
'').getPropertyValue("height"); bottom=top + parseInt(bottomm);
if (left < x && right > x && top < y && bottom > y)
{
iselement = true;
break;
}
}
The following example is working quite well:
<?xml version="1.0" standalone="yes"?>
<html>
<head>
<title></title>
<style type="text/css">
.test {position:absolute;top:10%; height:30%; left:45%; width:40%;
background-color:red;}
</style>
<script language="JavaScript">
function testit(Ereignis)
{
x = Ereignis.pageX;
y = Ereignis.pageY;
element = document.getElementsByTagName("*");
iselement = false;
for (i=0; i<element.length; i++)
{
left = document.defaultView.getComputedStyle(element[i],
'').getPropertyValue("left"); left=parseInt(left);
rightt = document.defaultView.getComputedStyle(element[i],
'').getPropertyValue("width"); right=left + parseInt(rightt);
top = document.defaultView.getComputedStyle(element[i],
'').getPropertyValue("top"); top=parseInt(top);
bottomm = document.defaultView.getComputedStyle(element[i],
'').getPropertyValue("height"); bottom=top + parseInt(bottomm);
if (left < x && right > x && top < y && bottom > y)
{
iselement = true;
break;
}
}
if(iselement) alert("There is an element on Position ("+x+","+y+")");
else alert("No element found");
}
document.onclick = testit;
</script>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000"
vlink="#FF0000">
<div class="test">
dfhsdfjhjdfhgkjfdh
</div>
</body>
</html>
in MSIE you can try to use
element.currentStyle... , however this may return relative values (%)
