Excel Freeze pane scrolling in HTML [Archive]

cpdjh02

11-07-2006, 03:42 PM

Hey everyone, I had a requirement to implement scrolling that is similar to something done with Excel Freeze panes. I have a table of data for which the header and first column should remain ‘fixed’ such that when the user scrolls down the header row needs to stay visible and the first column needs to scroll down with the body of the table. And when the user scrolls sideways the first column needs to stay visible and the header row needs to scroll sideways too.

I came up with a solution that seems to work on IE6 and FireFox. I wanted to share it with you incase it might be useful to someone and to see if I could get any feedback or comments.

<html>
<head>
<style>
#corner {
position:absolute;
top:0px;
left:0px;
background-color:green;
z-index:4;
width:28px;
height:20px;
}
#left_column {
position:absolute;
top:0px;
left:0px;
background-color:red;
margin-top:20px;
width:28px;
z-index:3;
}
#headers{
overflow:hidden;
background-color:blue;
position:absolute;
top:0px;
left:0px;
height:20px;
margin-left:28px;
z-index:3;
white-space: nowrap;
}

#data{
position:absolute;
top:0px;
left:0px;
margin-left:28px;
margin-top:20px;
z-index:2;
white-space: nowrap;
}

#container {
position:relative;
top:0px;
width:90%;
height:50%;
border:1px solid blue;
overflow:hidden;
}
#scrollbar{
position: absolute;
overflow: auto;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
padding: 0px;
z-index: 4;
}
.column1{width:60px;text-align: right;}
.column2{width:90px;text-align: right}
.column3{width:90px;text-align: right}
.column4{width:70px;text-align: right}
.column5{width:90px;text-align: right}

.row1{height:20px;}
.row2{height:20px;}
.row3{height:20px;}
.row4{height:20px;}
.row5{height:20px;}
</style>
<script>
var data;
var top;
var left;
var scrolled;
var scrollbars;
var container;
var contentwidth;
var contentheight;
function init(){
data=document.getElementById('data');
top=document.getElementById('headers');
left=document.getElementById('left_column')
scrolled=document.getElementById('scrolled');
scrollbars=document.getElementById('scrollbar');
container=document.getElementById('container');
contentheight=container.scrollHeight;
contentwidth=container.scrollWidth;
scrolled.style.height=contentheight+"px";
scrolled.style.width=contentwidth+"px";
}
function scroll(){
display();
var x = scrollbars.scrollLeft;
var y = scrollbars.scrollTop;
data.style.left = "-"+x+"px";
top.style.left="-"+x+"px";
data.style.top = "-"+y+"px";
left.style.top = "-"+y+"px";

}

function resize(){//This only matters if the div or window or what ever container can resize
contentheight=container.scrollHeight;
contentwidth=container.scrollWidth;
scrolled.style.height=contentheight+"px";
scrolled.style.width=contentwidth+"px";
display();
}
function display(){
var str='scrollbar.scrollLeft='+ scrollbar.scrollLeft+'<BR>'+
'scrollbars.scrollTop='+scrollbars.scrollTop+"<BR>"+
'scrollbar.style.width='+scrollbar.style.width+"<BR>"+
'top.style.width='+top.style.width+"<BR>"+
'top.width='+top.width+"<BR>"+
'top.scrollWidth='+top.scrollWidth+"<BR>"+
'contentheight='+contentheight+"<BR>"+
'contentwidth='+contentwidth;
document.getElementById('display').innerHTML=str;
}
</script>
</head>
<body onload="init()" onresize="resize()">

<div id="container" >
<div id="corner"></div>
<div id="headers">
<table cellspacing="0" cellpadding="0" border="0"><tr>
<td><div class="column1">header 1<div></td>
<td><div class="column2">header 2<div></td>
<td><div class="column3">header 3<div></td>
<td><div class="column4">header 4<div></td>
<td><div class="column5">header 5<div></td>
</tr></table>
</div>
<div id="left_column">
<table cellspacing="0" cellpadding="0" border="0">
<tr class="row1"><td>left</td></tr>
<tr class="row2"><td>col</td></tr>
<tr class="row3"><td>3</td></tr>
<tr class="row4"><td>4</td></tr>
<tr class="row5"><td>5</td></tr>
</table>
</div>

<div id="data">
<table cellspacing="0" cellpadding="0" border="0">
<TR class="row1">
<td><div class="column1">data 1</div></td>
<td><div class="column2">data 2</div></td>
<td><div class="column3">data 3</div></td>
<td><div class="column4">data 4</div></td>
<td><div class="column5">data 5</div></td>
</TR>
<TR class="row2">
<td><div class="column1">data 1</div></td>
<td><div class="column2">data 2</div></td>
<td><div class="column3">data 3</div></td>
<td><div class="column4">data 4</div></td>
<td><div class="column5">data 5</div></td>
</TR>
<TR class="row3">
<td><div class="column1">data 1</div></td>
<td><div class="column2">data 2</div></td>
<td><div class="column3">data 3</div></td>
<td><div class="column4">data 4</div></td>
<td><div class="column5">data 5</div></td>
</TR>
<TR class="row4">
<td><div class="column1">data 1</div></td>
<td><div class="column2">data 2</div></td>
<td><div class="column3">data 3</div></td>
<td><div class="column4">data 4</div></td>
<td><div class="column5">data 5</div></td>
</TR>
<TR class="row5">
<td><div class="column1">data 1</div></td>
<td><div class="column2">data 2</div></td>
<td><div class="column3">data 3</div></td>
<td><div class="column4">data 4</div></td>
<td><div class="column5">data 5</div></td>
</TR>
</table>
</div>
<div id="scrollbar" onscroll="scroll();">
<div id="scrolled"></div>
</div>
</div>
<div id='display'> </div>
</body>
</html>

Thanks
David