This code causes error col2 undefined if I click right button.
I solved this using two column frames and in second frame put
the following code to sync scrolling
<body onscroll="
window.parent.frame1.document.body.scrollTop=document.body.scrollTop;>
Unfortunately, this does not work in Firebird.
How to make it to work in Firebird browser?
>>I have a html table with 250 columns and some hundres rows
>>Since table is too wide, I want that the first column (Date) is always visible in screen when user scrolls horizontally table.
>>Excel has similar functionality allowing to lock first column.
>>Any idea how to implement this ?
>
>
>Javascript and DHTML will do the trick!
>
>The magic is in the
>
STYLE="table-layout:fixed"
>assigned to the table and the "ID" and "display" style of the "COL" tag:
>
<COL WIDTH=550 id="col2" style="display:none;">
>
>The script was created on the fly by me to show you the basic idea.
>You should change it to use an array of columns ref in a loop instead of calling each of it explicitly.
>
>Cut and paste the following HTML in a new html doc to see this in action.
>
>
><html>
><head>
><title>Scrolling table</title>
><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
></head>
><body bgcolor="#FFFFFF" text="#000000">
><h2>Scrolling table</h2>
><p>
><script>
>var colvisible;
>colvisible=1;
>function moveleft(){
>if (colvisible==2)
> {
> col1.style.display="";
> col2.style.display="none";
> colvisible=1
> }
>if (colvisible==3)
> {
> col2.style.display="";
> col3.style.display="none";
> colvisible=2
> }
>if (colvisible==4)
> {
> col3.style.display="";
> col4.style.display="none";
> colvisible=3
> }
>
>}
>function moveright(){
>if (colvisible==3)
> {
> col4.style.display="";
> col3.style.display="none";
> colvisible=4
> }
>if (colvisible==2)
> {
> col3.style.display="";
> col2.style.display="none";
> colvisible=3
> }
>if (colvisible==1)
> {
> col2.style.display="";
> col1.style.display="none";
> colvisible=2
> }
>
>}
>
>
></script>
>
><table width=650><tr>
><td align=left><input type=button value="left" onclick="moveleft()"></td>
><td align=right><input type=button value="right" onclick="moveright()"></td>
></tr></table>
>
><table STYLE="table-layout:fixed" border="1" width="650" cellspacing="0" cellpadding="2">
>
><COL WIDTH=100>
><COL WIDTH=550 id="col1">
><COL WIDTH=550 id="col2" style="display:none;">
><COL WIDTH=550 id="col3" style="display:none;">
><COL WIDTH=550 id="col4" style="display:none;">
>
> <tr>
> <th>Fixed col</th>
> <th>Col 1</th>
> <th>Col 2</th>
> <th>Col 3</th>
> <th>Col 4</th>
> </tr>
> <tr>
> <td>Fixed data</td>
> <td>Column 1 data</td>
> <td>Column 2 data</td>
> <td>Column 3 data</td>
> <td>Column 4 data</td>
> </tr>
> <tr>
> <td>Fixed data</td>
> <td>Column 1 data</td>
> <td>Column 2 data</td>
> <td>Column 3 data</td>
> <td>Column 4 data</td>
> </tr>
> <tr>
> <td>Fixed data</td>
> <td>Column 1 data</td>
> <td>Column 2 data</td>
> <td>Column 3 data</td>
> <td>Column 4 data</td>
> </tr>
> <tr>
> <td>Fixed data</td>
> <td>Column 1 data</td>
> <td>Column 2 data</td>
> <td>Column 3 data</td>
> <td>Column 4 data</td>
> </tr>
> <tr>
> <td>Fixed data</td>
> <td>Column 1 data</td>
> <td>Column 2 data</td>
> <td>Column 3 data</td>
> <td>Column 4 data</td>
> </tr>
></table>
></body>
></html>
>
>>
>HTH :-)
Andrus
