• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 149
  • Last Modified:

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

0
Steynsk
Asked:
Steynsk
  • 4
  • 3
1 Solution
 
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
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now