Initially commit of all the stickyHeader files to GitHub.

kingkool68 · Sep 25, 2011 · 65a20b0 · 65a20b0
1 parent ad7985f
commit 65a20b0
Show file tree

Hide file tree

Showing 13 changed files with 1,494 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
-.svn
+.svn
+.DS_Store
diff --git a/README b/README
@@ -0,0 +1,25 @@
+stickyHeader.js makes table headers stick to the top of the viewport when scrolling down long HTML data tables.
+
+Versions for
+* jQuery
+* Prototype
+* Moo Tools
+* Dojo Toolkit
+
+To get started just include:
+* stickyHeader.js
+* The two CSS rules to your stylesheet
+* class="stickyHeader" to any table that you want to have a stickyHeader
+
+== CSS Rules ==
+
+.hide {
+  display:none;
+}
+div.stickyHeader {
+  top:0;
+  position:fixed;
+  _position:absolute;
+}
+
+See a demo at http://dev.kingkool68.com/stickyHeader/
diff --git a/demo.css b/demo.css
@@ -0,0 +1,80 @@
+/*resetCSS*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	outline: 0;
+	font-weight: inherit;
+	font-style: inherit;
+	font-size: 100%;
+	font-family: inherit;
+	vertical-align: baseline;
+}
+/* remember to define focus styles! */
+:focus {
+	outline: 0;
+}
+body {
+	line-height: 1;
+	color: black;
+	background: white;
+}
+ol, ul {
+	list-style: none;
+}
+/* tables still need 'cellspacing="0"' in the markup */
+table {
+	border-collapse: separate;
+	border-spacing: 0;
+}
+caption, th, td {
+	text-align: left;
+	font-weight: normal;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: "";
+}
+blockquote, q {
+	quotes: "" "";
+}
+
+body {
+margin:0 auto;
+width:970px;
+}
+h1 {
+font-size:30px;
+font-weight:bold;
+padding:5px 0 10px;
+}
+h2 {
+font-size:20px;
+padding:5px 0 10px;
+}
+
+table {
+border:1px solid #ccc;
+margin-bottom:20px;
+background-color:#fff;
+width:400px;
+}
+
+table th {
+padding:12px 5px 2px;
+color:#780808;
+border-left:1px solid red;
+border-right:1px solid red;
+}
+
+table td {
+border-bottom:1px solid #333;
+padding:4px 3px;
+}
diff --git a/dojo.htm b/dojo.htm
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<title>StickyHeader 2 - Multiple Tables, Multiple Frameworks</title>
+<link rel="stylesheet" href="demo.css">
+<link rel="stylesheet" href="stickyheader.css">
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3.1/dojo/dojo.xd.js"></script>
+<script type="text/javascript" src="stickyheader.dojo.js"></script>
+</head>
+
+<body>
+<h1>Using the Dojo Toolkit JavaScript Framework</h1>
+<!--#include virtual="table.htm" -->
+</body>
+</html>
diff --git a/jquery.htm b/jquery.htm
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<title>StickyHeader 2 - Multiple Tables, Multiple Frameworks</title>
+<link rel="stylesheet" href="demo.css">
+<link rel="stylesheet" href="stickyheader.css">
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
+<script type="text/javascript" src="stickyheader.jquery.js"></script>
+</head>
+
+<body>
+<h1>Using the jQuery JavaScript Framework</h1>
+<!--#include virtual="table.htm" -->
+</body>
+</html>
diff --git a/mootools.htm b/mootools.htm
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<title>StickyHeader 2 - Multiple Tables, Multiple Frameworks</title>
+<link rel="stylesheet" href="demo.css">
+<link rel="stylesheet" href="stickyheader.css">
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.2/mootools-yui-compressed.js"></script>
+<script type="text/javascript" src="stickyheader.mootools.js"></script>
+</head>
+
+<body>
+<h1>Using the Mootools JavaScript Framework</h1>
+<!--#include virtual="table.htm" -->
+</body>
+</html>
diff --git a/prototype.htm b/prototype.htm
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<title>StickyHeader 2 - Multiple Tables, Multiple Frameworks</title>
+<link rel="stylesheet" href="demo.css">
+<link rel="stylesheet" href="stickyheader.css">
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"></script>
+<script type="text/javascript" src="stickyheader.prototype.js"></script>
+</head>
+
+<body>
+<h1>Using the Prototype JavaScript Framework</h1>
+<!--#include virtual="table.htm" -->
+</body>
+</html>
diff --git a/stickyheader.css b/stickyheader.css
@@ -0,0 +1,9 @@
+/* stickyHeader.css - Three little styles that make the stickyHeader script work. */
+.hide {
+display:none;
+}
+div.stickyHeader {
+position:fixed;
+_position:absolute;
+top:0;
+}
diff --git a/stickyheader.dojo.js b/stickyheader.dojo.js
@@ -0,0 +1,55 @@
+dojo.addOnLoad(window, function(){
+	var tables = dojo.query('table.stickyHeader');
+	dojo.forEach(tables, function(table){
+		var theadClone = dojo.clone(dojo.query(table).query('thead')[0]);
+		var stickyHeader = dojo.query(dojo.create('div'))
+    		.addClass('hide stickyHeader')
+			.addContent('<table></table>')
+    		.place(table,'after');
+		dojo.place(theadClone,dojo.query(stickyHeader).query('table')[0]);
+
+		var tableHeight = dojo.style(table, 'height');
+		var tableWidth = dojo.style(table, 'width');
+
+		var headerCells = dojo.query(table).query('th');
+		var headerCellHeight = dojo.style(headerCells[0], 'height');
+
+		var no_fixed_support = false;
+		if (dojo.style(stickyHeader[0],'position') == "absolute") {
+			no_fixed_support = true;
+		}
+
+		var stickyHeaderCells = dojo.query(stickyHeader).query('th');
+		dojo.style(stickyHeader[0],'width', tableWidth + 'px');
+		for (i=0; i<headerCells.length; i++) {
+			var headerCell = headerCells[i];
+			var paddingLeft = dojo.style(headerCell,'padding-left');
+			var paddingRight = dojo.style(headerCell,'padding-right');
+			var borderLeft = dojo.style(headerCell,'border-left-width');
+			if (isNaN(borderLeft)) { borderLeft = 0; }
+			var borderRight = dojo.style(headerCell,'border-right-width');
+			if (isNaN(borderRight)) { borderRight = 0; }
+			var width = dojo.style(headerCell,'width');
+			var cellWidth = width - paddingLeft - paddingRight - borderLeft - borderRight;
+			cellWidth = cellWidth + "px";
+			document.title = "cellwidth: " + cellWidth + "; width: " + width + "; paddingLeft: " + paddingLeft + "; paddingRight: " + paddingRight + "; borderLeft: " + borderLeft + "; borderRight: " + borderRight;
+			dojo.style(stickyHeaderCells[i],'width', cellWidth);
+		}
+
+		var cutoffTop = dojo.coords(table, 'includeScroll').t
+		var cutoffBottom = tableHeight + cutoffTop - headerCellHeight;
+
+		dojo.connect(window, 'scroll', function() {
+			var currentPosition = dojo.coords(document, 'includeScroll').y;
+			if (currentPosition > cutoffTop && currentPosition < cutoffBottom) {
+				dojo.removeClass(stickyHeader[0], 'hide');
+				if (no_fixed_support) {
+					dojo.style(stickyHeader[0],'top', currentPosition + 'px');
+				}
+			}
+			else {
+				dojo.addClass(stickyHeader[0], 'hide');
+			}
+		});
+	});
+});
diff --git a/stickyheader.jquery.js b/stickyheader.jquery.js
@@ -0,0 +1,46 @@
+$(document).ready(function () {
+	var tables = $('table.stickyHeader');
+	tables.each(function(i){
+		var table = tables[i];
+		var theadClone = $(table).find('thead').clone(true);
+		var stickyHeader =  $('<div></div>').addClass('stickyHeader hide');
+		stickyHeader.append($('<table></table')).find('table').append(theadClone);
+		$(table).after(stickyHeader);
+
+		var tableHeight = $(table).height();
+		var tableWidth = $(table).width() + Number($(table).css('padding-left').replace(/px/ig,"")) + Number($(table).css('padding-right').replace(/px/ig,"")) + Number($(table).css('border-left-width').replace(/px/ig,"")) + Number($(table).css('border-right-width').replace(/px/ig,""));
+
+		var headerCells = $(table).find('thead th');
+		var headerCellHeight = $(headerCells[0]).height();
+
+		var no_fixed_support = false;
+		if (stickyHeader.css('position') == "absolute") {
+			no_fixed_support = true;
+		}
+
+		var stickyHeaderCells = stickyHeader.find('th');
+		stickyHeader.css('width', tableWidth);
+
+		for (i=0; i<headerCells.length; i++) {
+			var headerCell = $(headerCells[i]);
+			var cellWidth = headerCell.width();
+			$(stickyHeaderCells[i]).css('width', cellWidth);
+		}
+
+		var cutoffTop = $(table).offset().top;
+		var cutoffBottom = tableHeight + cutoffTop - headerCellHeight;
+
+		$(window).scroll(function() { 
+		var currentPosition = $(window).scrollTop();
+			if (currentPosition > cutoffTop && currentPosition < cutoffBottom) {
+				stickyHeader.removeClass('hide');
+				if (no_fixed_support) {
+					stickyHeader.css('top', currentPosition + 'px');
+				}
+			}
+			else {
+				stickyHeader.addClass('hide');
+			}
+		});
+	});
+});
diff --git a/stickyheader.mootools.js b/stickyheader.mootools.js
@@ -0,0 +1,55 @@
+window.addEvent('domready', function() {
+	var tables = $$('table.stickyHeader');
+	tables.each(function(table){
+		var theadClone = table.getElement('thead').clone(true);
+		var stickyHeader =  new Element('div', {'class':'hide stickyHeader'})
+		stickyHeader.set('html', '<table></table>');
+		theadClone.inject(stickyHeader.getElement('table'));
+		stickyHeader.inject(table, 'after');
+
+		var tableHeight = table.getStyle('height').toInt();
+		var tableWidth = table.getStyle('width').toInt();
+		var tableWidth = table.getStyle('width').toInt(); + table.getStyle('padding-left').toInt(); + table.getStyle('padding-right').toInt();
+
+		var headerCells = table.getElements('th');
+		var headerCellHeight = headerCells[0].getStyle('height').toInt();
+
+		var no_fixed_support = false;
+		if (stickyHeader.getStyle('position') == "absolute") {
+			no_fixed_support = true;
+		}
+
+		var stickyHeaderCells = stickyHeader.getElements('th');
+		stickyHeader.setStyle('width', tableWidth);
+
+		for (i=0; i<headerCells.length; i++) {
+			var headerCell = headerCells[i]
+			var paddingLeft = headerCell.getStyle('padding-left').toInt();
+			var paddingRight = headerCell.getStyle('padding-right').toInt();
+			var borderLeft = headerCell.getStyle('border-left-width').toInt();
+			if (isNaN(borderLeft)) { borderLeft = 0; }
+			var borderRight = headerCell.getStyle('border-right-width').toInt();
+			if (isNaN(borderRight)) { borderRight = 0; }
+			var width = headerCell.getStyle('width').toInt();
+			var cellWidth = width + paddingLeft + paddingRight + borderLeft + borderRight;
+			cellWidth = cellWidth + "px";
+			document.title = "cellwidth: " + cellWidth + "; width: " + width + "; paddingLeft: " + paddingLeft + "; paddingRight: " + paddingRight + "; borderLeft: " + borderLeft + "; borderRight: " + borderRight;
+			stickyHeaderCells[i].setStyle('width', cellWidth);
+		}
+		var cutoffTop = table.getCoordinates().top;
+		var cutoffBottom = tableHeight + cutoffTop - headerCellHeight;
+
+		window.addEvent('scroll',function() { 
+			var currentPosition = document.getScroll().y;
+			if (currentPosition > cutoffTop && currentPosition < cutoffBottom) {
+				stickyHeader.removeClass('hide');
+				if (no_fixed_support) {
+					stickyHeader.setStyle('top', currentPosition + 'px');
+				}
+			}
+			else {
+				stickyHeader.addClass('hide');
+			}
+		});
+	});
+});