|
|
I'm trying to make a scrollable table where the data scrolls but the headers do not. I pretty much have it working (the code is below). However I'm having one small problem... I need the vertical scroll bar to show always. Right now you have to scroll to the right to see the vertical scroll bar.
If that didnt make any sense just paste the code below. I want to be able to scroll my data without having to scroll all the way to the right first to get the scroll bar.
===================================================
<html>
<head>
<style>
#tableHeader {
position: absolute;
}
#tableData {
position: absolute;
}
</style>
</head>
<body>
<div style="position:absolute; left:0px; top:0px; width:1400px; height:30px; background-color: #999999; layer-background-color: #999999; border: 1px none #000000;">
<table border="1" cellpadding="2" cellspacing="0" bordercolor="#000000" id="tableHeader">
<tr>
<td width="200">HEADER 1</td>
<td width="100">HEADER 2</td>
<td width="200">HEADER 3</td>
<td width="100">HEADER 4</td>
<td width="200">HEADER 5</td>
<td width="100">HEADER 6</td>
<td width="500">HEADER 7</td>
</tr>
</table>
</div>
<div style="position:absolute; left:0px; top:30px; width:1420px; height:100px; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000;overflow=scroll">
<table border="1" cellpadding="2" cellspacing="0" bordercolor="#000000" id="tableHeader">
<tr>
<td width="200">data</td>
<td width="100">data</td>
<td width="200">data</td>
<td width="100">data</td>
<td width="200">data</td>
<td width="100">data</td>
<td width="500">data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</table>
</div>
</body>
</html>
|
|
|
|
You do realize the only reason you have to scroll right is because you have set your columns widths to a total of 1400 pixels which means that unless your screen resolutions is greater than 1400, you'll have to scroll right.
Assuming you knew that...so are you wanting the vertical scroll bar to float over the table at the right of the screen regardless of the actual right edge of your table? That would look odd, and would not be what any user would expect. I think users would expect to have to scroll to the right edge of the table to find the scroll bar.
|
|
|
|
|
|
yes I realize that it only scrolls because of being 1400 wide. Obvisouly, I disagree that it would look odd... I feel that it would be more useful to the user than making them scroll to see the scroll bar.
check out...
http://jzeil2.100free.com/test.htm
Basicly I want that... but i want the header to be always at the top of the table (cause once the user scrolls down they will still want to know what the columns are).
|
|
|
|
After looking at this more, you are right, this is not an add thing, and is in fact exactly what most people would want. The scrolling properties you describe are what people expect in a windows application. There are several component vendors offering solutions to do exactly this and more, but they require server-side installation. If that's an option, it is probably worth the money.
I tried hacking my own, and I got it to work in IE, but in Firefox/Mozilla, it isn't right. I had to work some DHTML magic to resize the data div as the header div scrolls.
<html>
<head>
<style>
</style>
<script language=javascript1.2>
var headDiv, dataDiv;
var scrollTimer, initScroll = 0, lastScroll = 0;
var scrollingActive = false;
function ScrollCapture() {
curScroll = headDiv.scrollLeft;
scrollDiff = curScroll - lastScroll;
if (scrollDiff == 0) {
clearTimeout(scrollTimer);
x = dataDiv.style.width.replace("px","")/1;
x += curScroll - initScroll;
dataDiv.style.width = x+"px";
initScroll = curScroll;
scrollingActive = false;
}
lastScroll = curScroll;
}
function ScrollTrigger() {
if(!scrollingActive) {
scrollingActive = true;
scrollTimer = setInterval('ScrollCapture()',100);
}
}
function LoadTrigger() {
headDiv = document.getElementById('tblHead');
dataDiv = document.getElementById('tblData');
}
window.onload = LoadTrigger;
</script>
</head>
<body>
<div id="tblHead" style="width:800px; background-color:#999999; layer-background-color:#999999; border:1px none #000000; overflow-x:auto;" onscroll="ScrollTrigger();">
<table border="1" cellpadding="2" cellspacing="0" bordercolor="#000000" id="tableHeader">
<tr>
<td width=200 NOWRAP>HEADER 1</td>
<td width=100 NOWRAP>HEADER 2</td>
<td width=200 NOWRAP>HEADER 3</td>
<td width=100 NOWRAP>HEADER 4</td>
<td width=200 NOWRAP>HEADER 5</td>
<td width=100 NOWRAP>HEADER 6</td>
<td width=500 NOWRAP>HEADER 7</td>
</tr>
</table>
<div id="tblData" style="width:800px; height:100px; background-color:#CCCCCC; layer-background-color:#CCCCCC; border:1px none #000000; overflow:auto;">
<table border="1" cellpadding="2" cellspacing="0" bordercolor="#000000" id="tableHeader">
<tr>
<td width=200 NOWRAP>data</td>
<td width=100 NOWRAP>data</td>
<td width=200 NOWRAP>data</td>
<td width=100 NOWRAP>data</td>
<td width=200 NOWRAP>data</td>
<td width=100 NOWRAP>data</td>
<td width=500 NOWRAP>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</table>
</div>
</div>
</body>
</html> |
|
|
|
|
|
|
|
Cool....
I had come up with a different solution but with the same problems (I cant seem to get it to work in Netscape yet).
I used an iframe instead of resizing the div. I was able to set the position of the header with css but like i said this doesnt seem to work in netscape.
take a look if you are interested
http://jzeil2.100free.com/fdfs.html
|
|
|
|
|
|
|
|
hi troy,
you had given me some sort of idea on how to use
style...
cursor:hand;
thanks a lot.
|
|
|
|
|
|
Hey thanks.... I had gotten it working yesterday but your solution is a bit nicer.
|
|
|
jmirickhai
Troy Wolf