troubleshooting Question

How do I make the second column of my table frozen

Avatar of Steynsk
SteynskFlag for Netherlands asked on
JavaScriptjQuery
8 Comments1 Solution174 ViewsLast Modified:
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>
ASKER CERTIFIED SOLUTION
lenamtl

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 8 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 8 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros