Forum Moderators: open
I have nabbed and edited the following code, which now does pretty much exactly what I want (ie scroll and sync the cells in the table, horizontally and vertically). However when scrolling, the row/column headers "jump" up/to the left (respectively) and the data becomes misaligned. If you copy and paste the code you'll see what I mean.
Basically how do I edit the function to allow for the "BUTTON" cell offset?
Many thanks in advance, code follows:
Camman
<html>
<HEAD>
<style>
TD {width:100; height=50}
TH {width:100; height=50}
</style>
<script>
function sync()
{
var lft = document.all("dvData").scrollLeft
document.all("dvHeader").style.width= 200+lft
document.all("dvHeader").style.left= -lft
var top = document.all("dvData").scrollTop
document.all("dvHeader2").style.height= 300+top
document.all("dvHeader2").style.top = -top
}
</script>
</HEAD>
<body>
<div id="dvButton" style="position:absolute; left:0; top:0; overflow: hidden">
<table border=1 height="50" width="100">
<tr><td>BUTTON</td></tr>
</table>
</div>
<div id="dvHeader" style="position:absolute; left:100; top:0; height:50; width:200; overflow: hidden">
<table width="400" border="1" title="Table Heading">
<tr><th>Heading</th><th>Heading2</th><th>Heading3</th><th>Heading4</th></tr>
</table>
</div>
<div id="dvHeader2" style="position:absolute; left:0; top:50; height:300; width:100; overflow: hidden">
<table width="100" border="1" title="Table Heading2">
<tr><th>Row1</th></tr>
<tr><th>Row2</th></tr>
<tr><th>Row3</th></tr>
<tr><th>Row4</th></tr>
<tr><th>Row5</th></tr>
<tr><th>Row6</th></tr>
<tr><th>Row7</th></tr>
<tr><th>Row8</th></tr>
</table>
</div>
<div id="dvData" style="position:absolute; left:100; top:50; height:300; width:200; overflow: auto" onscroll="sync()">
<table width="400" border="1" title="Table Body">
<tr><td>Item1</td><td>Item2</td><td>Item3</td><td>Item4</td></tr>
<tr><td>Item1</td><td>Item2</td><td>Item3</td><td>Item4</td></tr>
<tr><td>Item1</td><td>Item2</td><td>Item3</td><td>Item4</td></tr>
<tr><td>Item1</td><td>Item2</td><td>Item3</td><td>Item4</td></tr>
<tr><td>Item1</td><td>Item2</td><td>Item3</td><td>Item4</td></tr>
<tr><td>Item1</td><td>Item2</td><td>Item3</td><td>Item4</td></tr>
<tr><td>Item1</td><td>Item2</td><td>Item3</td><td>Item4</td></tr>
<tr><td>Item1</td><td>Item2</td><td>Item3</td><td>Item4</td></tr>
</table>
</div>
</body>
</html>
function sync()
{
var lft = document.all("dvData").scrollLeft
document.all("dvHeader").style.width= 200+lft
document.all("dvHeader").style.left= 100-lft
var top = document.all("dvData").scrollTop
document.all("dvHeader2").style.height= 300+top
document.all("dvHeader2").style.top = 50-top
}
Just in case someone else wanted to use this.
Cheers,
Camman
Are you targeting IE only?
For cross browser compatibility you would need to use document.getElementById and add a unit. EG:
document.getElementById("dvHeader").style.width= 200+lft+'px';
HTH
I've made the changes you suggested and that improves things dramatically.
One last thing you might be able to help with is that I want the BUTTON cell to remain static and the horizontal and vertical headers to slide under it. Do you or anyone happen to know how that's done?
Cheers and again many thanks in advance. These forums have never let me down.
Camman
