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,

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

Open in new window

LVL 1
SteynskAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

COBOLdinosaurCommented:
Put the first two colums in a colgroup and then apply whatever is being applied to the first column to the colgroup instead.

Cd&
0
SteynskAuthor Commented:
Hi COBOLdinosaur,

Thank for your comment. But how do I put the both in the same colgroup?

Regards,

Steynsk
0
COBOLdinosaurCommented:
Never heard of Google?  

http://www.w3schools.com/tags/tag_colgroup.asp

Or Google it for a couple million more hits.

Cd&
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

SteynskAuthor Commented:
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
0
lenamtlCommented:
I don't know how far you are in this project
You can use jQuery EasyUI for your tables
http://www.jeasyui.com/tutorial/datagrid/datagrid5.php
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
COBOLdinosaurCommented:
>>>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&
0
SteynskAuthor Commented:
Yes right. Thanks for your constructive comments and time.
0
SteynskAuthor Commented:
Thanks
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.