Entry
How can I position a layer on top of a table row?
Oct 15th, 2001 01:51
Martin Honnen,
The following example works with NN4, NN6 and IE4+. For NN6 and IE4+ you
need to access the row via the DOM, for instance
document.all.tableId.rows[rowIndex] in IE4+ and
document.getElementById('tableId').rows[rowIndex] in NN6 and IE5+, and
then you need to add up the offsetLeft/offsetTop coordinates along the
offsetParent hierarchy.
With NN4 you need to place an anchor in the row and then you can use the
x/y coordinates of the anchor to position the layer.
<html>
<head>
<style type="text/css">
#aDiv { position: absolute; visibility: hidden; }
#aDiv a { background-color: orange; color: white; }
</style>
<script type="text/javascript">
function moveDivToRow () {
if (document.all) {
var row = aTable.rows[1];
var coords = {x: 0, y: 0};
while (row) {
coords.x += row.offsetLeft;
coords.y += row.offsetTop;
row = row.offsetParent;
}
aDiv.style.pixelLeft = coords.x;
aDiv.style.pixelTop = coords.y;
aDiv.style.visibility = 'visible';
}
else if (document.getElementById) {
var row = document.getElementById('aTable').rows[1];
var coords = {x: 0, y: 0};
while (row) {
coords.x += row.offsetLeft;
coords.y += row.offsetTop;
row = row.offsetParent;
}
document.getElementById('aDiv').style.left = coords.x + 'px';
document.getElementById('aDiv').style.top = coords.y + 'px';
document.getElementById('aDiv').style.visibility = 'visible';
}
else if (document.layers) {
document.aDiv.left = document.anchors.placeHolder.x;
document.aDiv.top = document.anchors.placeHolder.y;
document.aDiv.visibility = 'show';
}
}
</script>
</head>
<body onload="moveDivToRow()">
<table id="aTable" border="1" width="300">
<tr>
<td>
<script type="text/javascript">
for (var i = 0; i < Math.floor(Math.random() * 30) + 30; i++)
document.write(i + ' Kibology. ');
</script>
</td>
</tr>
<tr>
<td>
<a name="placeHolder">
Kibology
</a>
</td>
</tr>
</table>
<div id="aDiv"><a
href="http://JavaScript.faqts.com">JavaScript.faqts</a></div>
</body>
</html>
