stickyheaders resizing

README.markdown

@@ -28,6 +28,15 @@ Included all original [document pages](http://mottie.github.com/tablesorter/docs
 
 View the [complete listing here](http://mottie.github.com/tablesorter/changelog.txt).
 
+#### Version 2.0.22.1 (2011-10-15)
+
+* Updated the stickyHeaders widget
+  * Sticky headers will now resize with the browser window
+  * Updated blue and green themes to work better with sticky headers.
+  * If using the uitheme widget, make sure the 'uitheme' widget is applied before (left of) the 'stickyHeaders' widget, as follows:
+
+        widgets: ['zebra', 'uitheme', 'stickyHeaders']
+
 #### Version 2.0.22 (2011-10-13)
 
 * Updated the pager plugin:

changelog.txt

@@ -1,5 +1,15 @@
 TableSorter Change Log
 
+Version 2.0.22.1 (2011-10-15)
+============================
+
+* Updated the stickyHeaders widget
+  * Sticky headers will now resize with the browser window
+  * Updated blue and green themes to work better with sticky headers.
+  * If using the uitheme widget, make sure the 'uitheme' widget is applied before (left of) the 'stickyHeaders' widget, as follows:
+
+        widgets: ['zebra', 'uitheme', 'stickyHeaders']
+
 Version 2.0.22 (2011-10-13)
 ============================
 

css/blue/style.css

@@ -7,17 +7,20 @@ table.tablesorter {
 	width: 100%;
 	text-align: left;
 }
-table.tablesorter thead tr th, table.tablesorter tfoot tr th {
+table.tablesorter thead tr.stickyHeader {
+	background: #ccc;
+}
+table.tablesorter thead tr th, tr.stickyHeader th, table.tablesorter tfoot tr th {
 	background-color: #e6eeee;
-	border: 1px solid #fff;
 	border-collapse: collapse;
 	font-size: 8pt;
 	padding: 4px;
 }
-table.tablesorter thead tr .header {
+table.tablesorter thead tr .header, tr.stickyHeader .header {
 	background-image: url(black-bg.gif);
 	background-repeat: no-repeat;
 	background-position: center right;
+	border: 1px solid #fff;
 	cursor: pointer;
 }
 table.tablesorter tbody td {

css/green/style.css

@@ -7,8 +7,7 @@ table.tablesorter {
 	width: 100%;
 	text-align: left;
 }
-table.tablesorter thead tr th, table.tablesorter tfoot tr th {
-	background-color: #e6eeee;
+table.tablesorter thead tr th, tr.stickyHeader th, table.tablesorter tfoot tr th {
 	border-collapse: collapse;
 	font-size: 12px;
 	padding: 5px;
@@ -17,16 +16,17 @@ table.tablesorter td {
 	color: #3d3d3d;
 	padding: 5px;
 }
-table.tablesorter thead {
+table.tablesorter thead tr, table.tablesorter tfoot tr {
 	background: url(bkgd.png) center center repeat-x;
 }
 table.tablesorter .header {
 	background: transparent;
+	border-right: #cdcdcd 1px solid;
 	padding: 9px;
 	height: auto;
 	cursor: pointer;
 }
-table.tablesorter .header span {
+table.tablesorter .header span, .stickyHeader .header span {
 	background: url(none.png) no-repeat;
 	padding: 2px 0 2px 25px;
 }

docs/example-widget-sticky-header.html

@@ -13,15 +13,22 @@
 	<script src="js/chili/recipes.js"></script>
 	<script src="js/docs.js"></script>
 
-	<!-- Tablesorter: required -->
+	<!-- Tablesorter: theme -->
 	<link rel="stylesheet" href="../css/blue/style.css">
+	<!-- test UI theme; also add 'uitheme' below:  widgets: ['zebra', 'uitheme', 'stickyHeaders'] ; THE ORDER DOES MATTER! -->
+	<!--
+	<link rel="stylesheet" href="../css/ui/style.css">
+	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css">
+	-->
+
+	<!-- Tablesorter script: required -->
 	<script src="../js/jquery.tablesorter.js"></script>
 	<script src="../js/jquery.tablesorter.widgets.js"></script>
 
 <script id="js">$(function(){
 
 	$("table").tablesorter({
-		widgets: ['stickyHeaders']
+		widgets: [ 'uitheme', 'zebra', 'stickyHeaders' ]
 	});
 
 }); </script>

docs/index.html

@@ -1105,16 +1105,15 @@ $(table)
 
 	<p><strong>Full release</strong> - Plugin, Documentation, Add-ons, Themes <a href="http://github.com/Mottie/tablesorter/downloads">jquery.tablesorter.zip</a></p>
 
-
 	<p><strong>Pick n choose</strong> - Place at least the required files in a directory on your webserver that is accessible to a web browser.  Record this location.</p>
 
 	<strong id="Download-Required">Required:</strong>
 	<ul>
-		<li><a class="external" href="http://docs.jquery.com/Downloading_jQuery#Download_jQuery">jQuery</a> (1.2.1 or higher)</li>
+		<li><a class="external" href="http://docs.jquery.com/Downloading_jQuery#Download_jQuery">jQuery</a> (1.2.1 or higher; some demos need jQuery 1.4.2+)</li>
 		<li><a href="../js/jquery.tablesorter.min.js">jquery.tablesorter.min.js</a> (17kb, minified for production - please put the file on your server)</li>
 	</ul>
 
-	<strong id="Download-Addons">Optional/Add-Ons:</strong>
+	<strong id="Download-Addons">Optional / Add-Ons:</strong>
 	<ul>
 		<li><a class="external" href="http://plugins.jquery.com/files/jquery.metadata.2.1.zip">jQuery Metadata 2.1</a> (3,7kb, required for setting <a href="#Examples">inline options</a>)</li>
 		<li><a href="../js/jquery.tablesorter.js">jquery.tablesorter.js</a> (31kb, for development)</li>
@@ -1145,18 +1144,18 @@ $(table)
 
 	<a name="Support"></a>
 	<h1>Support</h1>
-	<p>
-		Support is available through the
-		<a class="external" href="http://jquery.com/discuss/">jQuery Mailing List</a>.
-	</p>
-	<p>Access to the jQuery Mailing List is also available through <a class="external" href="http://www.nabble.com/JQuery-f15494.html">Nabble Forums</a>.</p>
 
+	<p>If you are having a problem with the plugin or you want to submit a feature request, please <a href="https://github.com/Mottie/tablesorter/issues">submit an issue</a>.</p>
+
+	<p>If you would like to contribute, <a href="https://github.com/Mottie/tablesorter">fork a copy on github</a>.</p>
+
+	<p>Support is also available through the <a class="external" href="http://jquery.com/discuss/">jQuery Mailing List</a> or <a class="external" href="http://stackoverflow.com/">StackOverflow</a>.</p>
+
+	<p>Access to the jQuery Mailing List is also available through <a class="external" href="http://www.nabble.com/JQuery-f15494.html">Nabble Forums</a>.</p>
 
 	<a name="Credits"></a>
 	<h1>Credits</h1>
-	<p>
-		Written by <a class="external" href="http://lovepeacenukes.com">Christian Bach</a>.
-	</p>
+	<p>Written by <a class="external" href="http://lovepeacenukes.com">Christian Bach</a>.</p>
 	<p>
 		Documentation written by <a class="external" href="http://www.ghidinelli.com">Brian Ghidinelli</a>,
 		based on <a class="external" href="http://malsup.com/jquery/">Mike Alsup's</a> great documention.<br>

js/jquery.tablesorter.widgets.js

@@ -142,12 +142,14 @@ $.tablesorter.addWidget({
 		var win = $(window),
 			header = $(table).find('thead'),
 			hdrCells = header.find('tr').children(),
+			brdr = parseInt(hdrCells.eq(0).css('border-left-width'),10),
 			sticky = header.find('tr').clone()
 				.addClass('stickyHeader')
 				.css({
-					width      : header.width(),
+					width      : header.outerWidth() + brdr * 2,
 					position   : 'fixed',
 					top        : 0,
+					marginLeft : -brdr,
 					visibility : 'hidden'
 				}),
 			stkyCells = sticky.children();
@@ -177,13 +179,19 @@ $.tablesorter.addWidget({
 		});
 		header.prepend( sticky );
 		// make it sticky!
-		win.scroll(function(){
+		win
+			.scroll(function(){
 				var $t = $(table),
 					offset = $t.offset(),
 					sTop = win.scrollTop(),
-				sticky = $t.find('.stickyHeader'),
-				vis = ((sTop > offset.top) && (sTop < offset.top + $t.height())) ? 'visible' : 'hidden';
+					vis = ((sTop > offset.top) && (sTop < offset.top + $t.find('tbody').height())) ? 'visible' : 'hidden';
 				sticky.css('visibility', vis);
+			})
+			.resize(function(){
+				sticky.css({ width: header.outerWidth() + brdr * 2 })
+				stkyCells.each(function(i){
+					$(this).width( hdrCells.eq(i).width() );
+				});
 			});
 	}
 });