FLoating table header in Mozilla

#1

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" >

<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. : )

#2

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

patelbrijeshn (AT) gmail (DOT) com wrote:

Quote:

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. : )

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

FLoating table header in Mozilla

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)

FLoating table header in Mozilla - 07-18-2006 , 07:55 AM

Re: FLoating table header in Mozilla - 07-20-2006 , 03:30 PM