asked on

Horizontal and vertical scroll bar

Hi experts

I'm looking for some fancy scrolling to be done. 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 realize it’s a bit hard to understand what I’m looking for here, if it helps imagine an excel worksheet with the first row and first column locked.

Thanks
David

manav_mathur

something like this??
http://www.activewidgets.com/javascript.forum.2991.0/header-row-not-moving-when.html

NHBFighter

ASKER

The functionallity that the Grid widget shows on the activewidgets home page http://www.activewidgets.com/ is the type of functionallity I'm looking for. (But without using the actiewidgets package)

Thanks

NHBFighter

ASKER

So... does anybody have any idea how to approach this?

NHBFighter

ASKER

Well if anybody is interested here is a solution I came up with.

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

ASKER CERTIFIED SOLUTION

Computer101

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial