Hi ,
I want to display a huge table. So I want to make the table header
visible on the screen even as the user scrolls the window. I am using
div tag to create the floating table header.
Here is the code snippet :
HTML :
<body >
<div id="headStart" style="position: absolute;">
</div>
<table CELLSPACING="1" BORDER="0" HEIGHT="650" width="2918"
id="partTable" >
<!-- start of header -->
<tr id="head1">
............ table row to float
</tr>
</table>
</body>
For floating the table header I m using following javascript snippet :
var headTop = -1;
var FloatHead1;
function processScroll()
{
if (headTop < 0)
{
saveHeadPos();
}
if (headTop 0)
{
if (document.documentElement && document.documentElement.scrollTop)
theTop = document.documentElement.scrollTop;
else if (document.body)
theTop = document.body.scrollTop;
if (theTop headTop)
FloatHead1.style.top = (theTop-headTop) + 'px';
else
FloatHead1.style.top = '0px';
}
}
function saveHeadPos()
{
parTable = document.getElementById("headStart");
if (parTable != null)
{
headTop = parTable.offsetTop + 3;
FloatHead1 = document.getElementById("head1");
FloatHead1.style.position = "relative";
}
}
/* add event handlers here */
window.onscroll = processScroll;
It works great in I.E. , but the header does not float in Mozilla. The
processScroll() action does get called in Mozilla.
Please If any body can help me out fixing this. : )
