Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

Troubleshooting
Research
Professional Opinions
Ask a Question
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

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
Avatar of lenamtl
lenamtlFlag of Canada image

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

Commented:
This problem has been solved!
Unlock 1 Answer and 8 Comments.
See Answers