Steynsk
asked on
How do I make the second column of my table frozen
Hi Experts,
I've got this very usefull script. It has a frozen header row and the first left column is frozen as well.
With frozen I mean the other content scrols beneath it.
What I would like is the second column to be frozen as well.
I've tried to make sense out of the code but my knowledge level is not far enough to understand it completely.
What should I do to achieve this?
Thank you,
I've got this very usefull script. It has a frozen header row and the first left column is frozen as well.
With frozen I mean the other content scrols beneath it.
What I would like is the second column to be frozen as well.
I've tried to make sense out of the code but my knowledge level is not far enough to understand it completely.
What should I do to achieve this?
Thank you,
<!DOCTYPE HTML>
<html>
<head>
<title>Javascript pivot based on json data</title>
<style type="text/css">
* { margin: 0; padding: 0; }
li { list-style: none; }
#table_wrapper { position: relative; line-height: 30px; color: #333; }
#table_wrapper * { font-family: 'Arial'; font-size: 13px; }
#table_wrapper a { color: #333; text-decoration: none; }
#table_wrapper a:hover { text-decoration: underline; }
#table_wrapper > table { background: #ccc; }
#table_wrapper > table td { background: #fff; height: 30px; min-width: 30px; text-align: center; white-space: nowrap; empty-cells: show; font-weight: normal; }
#table_wrapper > table tr td:first-child { padding: 0 20px; text-align: left; }
#table_wrapper > table tr:first-child td { text-indent: -9999px; }
#table_wrapper > table tr:first-child td:first-child { padding: 0; }
span#pivot { display: block; height: 30px; background: #d2e2ef; border: 1px solid #ccc; position: fixed; top: 0; left: 0; z-index: 1; }
ul#top_header { position: absolute; top: 0; left: 0; transform: rotate(-90deg); transform-origin: right top 0; }
ul#top_header li { height: 30px; padding: 0 10px; text-align: left; background: #d2e2ef; border: 1px solid #ccc; border-top: 0; }
ul#left_header { position: absolute; top: 32px; left: 0; white-space: nowrap; }
ul#left_header li { height: 30px; text-indent: 20px; background: #f0f0f0; border: 1px solid #ccc; border-top: 0; white-space: nowrap; }
</style>
</head>
<body>
<div id="table_wrapper">
<table cellpadding="0" cellspacing="1" border="0"></table>
<ul id="left_header"></ul>
<ul id="top_header"></ul>
<span id="pivot"></span>
</div>
</body>
<script type="text/javascript">
var data = [{user: "Bill", ADSgroup: "Domain users"},{ user: "Bill", ADSgroup: "Application B"},{user: "Judy", ADSgroup: "Domain users"},{user: "Judy", ADSgroup: "Application A"},{user: "John", ADSgroup: "Domain users"},{user: "George", ADSgroup: "Application B"},{user: "Hanna", ADSgroup: "Printer 45"},{user: "Pete", ADSgroup: "Domain users"},{ user: "Paul", ADSgroup: "Application B"},{user: "Marie", ADSgroup: "Domain users"},{user: "Peter", ADSgroup: "Application A"},{user: "Charlot", ADSgroup: "Domain users"},{user: "Barbara", ADSgroup: "Application B"},{user: "Achmet", ADSgroup: "Printer 45"}];
// set users and groups
var users = [];
var groups = [];
for ( var i=0; i<data.length; i++ ) {
if ( users.indexOf(data[i].user) < 0 )
users.push(data[i].user);
if ( groups.indexOf(data[i].ADSgroup) < 0 )
groups.push(data[i].ADSgroup);
}
users.sort();
groups.sort();
// set table data
var table = [];
// create empty array
for ( var i=0; i<=groups.length; i++ ) {
table[i] = [];
for ( var j=0; j<=users.length; j++ ) {
table[i][j] = '';
}
}
// left header
for ( var i=0; i<groups.length; i++ ) {
table[i+1][0] = '<a href="group.asp?group=' + groups[i] + '">' + groups[i] + '</a>';
}
// top header
for ( var i=0; i<users.length; i++ ) {
table[0][i+1] = '<a href="user.asp?user=' + users[i] + '">' + users[i] + '</a>';
}
// content data
for ( var i=0; i<data.length; i++ ) {
var g = groups.indexOf(data[i].ADSgroup) + 1;
var u = users.indexOf(data[i].user) + 1;
table[g][u] = '<a href="selection.asp?group=' + data[i].ADSgroup + '&user=' + data[i].user + '">X</a>';
}
// add users count per group
table[0].splice(1, 0, '');
var cnt = 0;
for ( var i=0; i<groups.length; i++ ) {
cnt = 0;
for ( var j=0; j<users.length; j++ ) {
if ( table[i+1][j+1]!='' ) cnt++;
}
table[i+1].splice(1, 0, cnt);
}
// create data table
var table_html = '';
for ( var i=0; i<table.length; i++ ) {
table_html += '<tr>';
for ( var j=0; j<table[i].length; j++ ) {
table_html += '<td>' + table[i][j] + '</td>'
}
table_html += '</tr>';
}
document.querySelector('#table_wrapper > table').innerHTML = table_html;
var pivot = document.getElementById('pivot');
var topHeader = document.getElementById('top_header');
var leftHeader = document.getElementById('left_header');
var pivotWidth = 0;
var pivotHeight = 0;
createTableHeaders();
function createTableHeaders()
{
// create top header
var tds = document.querySelectorAll('#table_wrapper tr:first-child td');
for ( var i=1; i<tds.length; i++ )
{
var li = document.createElement("li");
li.innerHTML = tds.item(i).innerHTML;
topHeader.appendChild(li);
}
// create pivot
pivotWidth = document.querySelector('#table_wrapper td:first-child') == null ? 0 : document.querySelector('#table_wrapper td:first-child').offsetWidth + 2;
pivotHeight = topHeader.offsetWidth;
pivot.style.width = pivotWidth - 2 + 'px';
pivot.style.height = pivotHeight - 2 + 'px';
// create left header
var tds = document.querySelectorAll('td:first-child');
for ( var i=1; i<tds.length; i++ )
{
var li = document.createElement("li");
li.innerHTML = tds.item(i).innerHTML;
li.style.width = tds.item(i).offsetWidth + 'px';
leftHeader.appendChild(li);
}
leftHeader.style.top = pivotHeight + 'px';
// move top header for rotating
topHeader.style.left = pivotWidth - pivotHeight + 'px';
// resize first cell of table
var firstCell = document.querySelector('#table_wrapper > table tr:first-child td:first-child');
firstCell.style.width = pivot.style.width;
firstCell.style.height = pivot.style.height;
}
var lastScrollTop = 0;
var lastScrollLeft = 0;
window.onscroll = function()
{
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
if ( lastScrollTop != scrollTop ) // vertical scroll
{
// fix top leader by converting position to [fixed]
topHeader.style.position = 'fixed';
topHeader.style.left = pivotWidth - pivotHeight - scrollLeft + 'px';
topHeader.style.top = 0;
topHeader.style.zIndex = 0;
// convert position of left header to [absolute]
leftHeader.style.position = 'absolute';
leftHeader.style.left = scrollLeft + 'px';
leftHeader.style.top = pivotHeight + 'px';
leftHeader.style.zIndex = 1;
lastScrollTop = scrollTop;
}
if ( lastScrollLeft != scrollLeft ) // horizontal scroll
{
// fix left header by converting position to [fixed]
leftHeader.style.position = 'fixed';
leftHeader.style.left = 0;
leftHeader.style.top = pivotHeight - scrollTop + 'px';
leftHeader.style.zIndex = 0;
// convert position of top header to [absolute]
topHeader.style.position = 'absolute';
topHeader.style.left = pivotWidth - pivotHeight + 'px';
topHeader.style.top = scrollTop + 'px';
topHeader.style.zIndex = 1;
lastScrollLeft = scrollLeft;
}
};
window.scrollTo(0,0);
</script>
</html>
ASKER
Hi COBOLdinosaur,
Thank for your comment. But how do I put the both in the same colgroup?
Regards,
Steynsk
Thank for your comment. But how do I put the both in the same colgroup?
Regards,
Steynsk
Never heard of Google?
http://www.w3schools.com/tags/tag_colgroup.asp
Or Google it for a couple million more hits.
Cd&
http://www.w3schools.com/tags/tag_colgroup.asp
Or Google it for a couple million more hits.
Cd&
ASKER
Yes thank you very much for the google link I really needed that.
But I don’t know where and how to implement it in the javascript. This javascript does not make sense to me and I don't where to implement it in the code.
I'm more into classic asp and PHP and I can't figure out how this works in javascript. Maybe you can help me out a little further. And please don't give me links to javascripting classes.
Regards,
Steynsk
But I don’t know where and how to implement it in the javascript. This javascript does not make sense to me and I don't where to implement it in the code.
I'm more into classic asp and PHP and I can't figure out how this works in javascript. Maybe you can help me out a little further. And please don't give me links to javascripting classes.
Regards,
Steynsk
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
>>>This javascript does not make sense to me and I don't where to implement it in the code.
Then why are you using you do not understand. How do you know it does not include malicious code? How do you intend to support it or maintain it if you don't understand it?
You need to spend some time learning it well enough to avoid long term issues.
Cd&
Then why are you using you do not understand. How do you know it does not include malicious code? How do you intend to support it or maintain it if you don't understand it?
You need to spend some time learning it well enough to avoid long term issues.
Cd&
ASKER
Yes right. Thanks for your constructive comments and time.
ASKER
Thanks
Cd&