By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,302 Members | 1,788 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,302 IT Pros & Developers. It's quick & easy.

FLoating table header in Mozilla

P: n/a
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. : )

Jul 18 '06 #1
Share this Question
Share on Google+
1 Reply


P: n/a
Hi,
I can get it to work if the item with id="head1" is a div and not a tr.
So I think maybe you can't separate one row from the rest of the table
like you're trying to do.
Sarah

pa***********@gmail.com wrote:
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. : )
Jul 20 '06 #2

This discussion thread is closed

Replies have been disabled for this discussion.