|
|
#1
18.07.2006, 12:28
|
|||
|
|||
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. : )     
|
 |
| Thread Tools | Search this Thread |
| Display Modes | |
|
|
Linear Mode
