First, some context: I am programmatically creating a web page (using
XHTML and CSS) containing a table (a customized TV program schedule)
that is very large (several screens wide and tall). I'm planning to
use "div" elements rather than table cells for two reasons: 1) to
speed table rendering, and 2) to ensure accurate cell widths so the
program titles won't cause cells to contract and expand.
My question is: Is it possible to obtain the following two behaviors for the table:
1) I would like for the "channel" column to always be visible on the
left edge, regardless of how far the user has scrolled to the right,
but still scroll vertically with the rest of the table.
2) I would like the "time" row to always be visible at the top
regardless of how far the user has scrolled down, but still scroll
horizontally with the rest of the table.
I have tried various combinations of "position:relative" and
"position:absolute" for my "div" elements, but I haven't figured out
how to have a "div" element relative in one direction and absolute in
the other. Am I overlooking something? |
Clarification of Question by
gw-ga
on
13 Jul 2006 18:28 PDT
I adapted some code that user nschafer uploaded to this web page:
http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_21782342.html
The code in question allows modifying an arbitrary property of an
arbitrary class defined in any stylesheet (or inlined in the HTML
page).
The following solution seems to work...
<html>
<head>
</head>
<body>
<style type="text/css">
.ColHeader {position:absolute; background-color:gold; font-size:24;
top:0px; width:100px; height:50px;}
</style>
<style type="text/css">
.RowHeader {position:absolute; background-color:gold; font-size:24;
left:0px; width:100px; height:50px;}
</style>
<style type="text/css">
.TopLeft {position:fixed; background-color:gold; font-size:24;
left:0px; top:0px; width:100px; height:50px;}
</style>
<div style="position:absolute; left:100px; top:50px; height:1500px;
width:1500px; background-color:silver;">GRID CONTENT
PLACE-HOLDER</div>
<div class="ColHeader" style="left:100px;">12:00</div>
<div class="ColHeader" style="left:200px;">1:00</div>
<div class="ColHeader" style="left:300px;">2:00</div>
<div class="ColHeader" style="left:400px;">3:00</div>
<div class="RowHeader" style="top:50px;">Channel 1</div>
<div class="RowHeader" style="top:100px;">Channel 2</div>
<div class="RowHeader" style="top:150px;">Channel 3</div>
<div class="RowHeader" style="top:200px;">Channel 4</div>
<div class="TopLeft" />
<script type="text/javascript"><!-- //
document.onscroll = Snap;
document.onload = Snap();
// set the value of a property of a CSS Rule
function changeClassProperty(sClassName,sProperty,sValue) {
sClassName="."+sClassName;
var sheets = document.styleSheets;
var rules;
var styleObj;
for (i=0;i< sheets.length; i++) {
rules=sheets[i].cssRules || sheets[i].rules;
for (var j=0; j<rules.length; j++) {
if (rules[j].selectorText && rules[j].selectorText==sClassName) {
styleObj=rules[j].style;
styleObj[sProperty]=sValue;
break;
}
}
}
}
function Snap(){
changeClassProperty("ColHeader","top",document.body.scrollTop + "px");
changeClassProperty("RowHeader","left",document.body.scrollLeft + "px");
}
-->
</script>
</body>
</html>
|
