Avatar of Steynsk
SteynskFlag for Netherlands

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,

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

JavaScriptjQuery

Avatar of undefined
Last Comment
Steynsk
Avatar of COBOLdinosaur
COBOLdinosaur
Flag of Canada image

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

Cd&
Avatar of Steynsk
Steynsk
Flag of Netherlands image

ASKER

Hi COBOLdinosaur,

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

Regards,

Steynsk
Avatar of COBOLdinosaur
COBOLdinosaur
Flag of Canada image

Never heard of Google?  

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

Or Google it for a couple million more hits.

Cd&
Avatar of Steynsk
Steynsk
Flag of Netherlands image

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
ASKER CERTIFIED SOLUTION
Avatar of lenamtl
lenamtl
Flag of Canada image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Avatar of COBOLdinosaur
COBOLdinosaur
Flag of Canada image

>>>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&
Avatar of Steynsk
Steynsk
Flag of Netherlands image

ASKER

Yes right. Thanks for your constructive comments and time.
Avatar of Steynsk
Steynsk
Flag of Netherlands image

ASKER

Thanks
JavaScript
JavaScript

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.

127K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo