Add cssStickyHeaders_attachTo widget option. Fixes #453

docs/example-widget-css-sticky-header.html

@@ -25,9 +25,13 @@
 	<link class="theme" rel="stylesheet" href="../css/theme.dark.css">
 	<link class="theme" rel="stylesheet" href="../css/theme.dropbox.css">
 
-	<style>
+	<style id="css">/* wrapper of table 2 */
-	
+.wrapper {
-	</style>
+	position: relative;
+	top: 50px;
+	height: 250px;
+	overflow-x: auto;
+}</style>
 
 	<!-- Tablesorter script: required -->
 	<script src="../js/jquery.tablesorter.js"></script>
@@ -36,21 +40,26 @@
 
 	<script id="js">$(function(){
 
-	$("table").tablesorter({
+	var options = {
-
 		widthFixed : true,
 		showProcessing: true,
-
 		headerTemplate: '{content} {icon}', // Add icon for jui theme; new in v2.7!
 
 		widgets: [ 'uitheme', 'zebra', 'cssStickyHeaders', 'filter' ],
 
 		widgetOptions: {
-			cssStickyHeaders_offsetX : 0,
+			cssStickyHeaders_offset     : 0,
-			cssStickyHeaders_offsetY : 0
+			cssStickyHeaders_addCaption : true,
+			cssStickyHeaders_attachTo   : null
 		}
 
-	});
+	};
+
+	$("#table1").tablesorter(options);
+
+	/* make second table scroll within its wrapper */
+	options.widgetOptions.cssStickyHeaders_attachTo = '.wrapper' // or $('.wrapper')
+	$("#table2").tablesorter(options);
 
 });</script>
 <script>
@@ -86,7 +95,7 @@ $(function() {
 
 <div id="banner">
 	<h1>table<em>sorter</em></h1>
-	<h2>CSS Sticky Header Widget (beta)</h2>
+	<h2>CSS Sticky Header Widget</h2>
 	<h3>Flexible client-side table sorting</h3>
 	<a href="index.html">Back to documentation</a>
 </div>
@@ -96,14 +105,24 @@ $(function() {
 	<p class="tip">
 		<em>NOTE!</em>
 		<ul>
-			<li>This demo uses the CSS Sticky Headers widget (beta) which uses CSS transforms to reposition the table head.</li>
+			<li>This demo uses the CSS Sticky Headers widget which uses CSS transforms to reposition the table head.</li>
 			<li><a href="http://caniuse.com/#search=transform">CSS transforms</a> are supported by most modern browsers (not IE8 and older).</li>
-			<li>The jQuery UI themed table does not stick to the top of the page due to the extra padding. Adjust the <code>cssStickyHeaders_offsetY</code> option as desired. I didn't bother in this demo because it shows more than just the jQuery UI theme.</li>
+			<li>In <span class="version">v2.14.4</span>:
-			<li><strong>It doesn't seem to work in Internet Explorer v10, but it should</strong>.</li>
+				<ul>
-			<li>This widget is still in <span class="label label-info">Beta</span> (<span class="version">v2.14.2</span>)</li>
+					<li>Added <code>cssStickyHeaders_attachTo</code> (default set to <code>null</code>). Setting this option with either a jQuery selector string (<code>&quot;.wrapper&quot;</code>) or jQuery object (<code>$(&quot;.wrapper&quot;)</code>) to attach the sticky header to this element - see the second example below.</li>
+					<li>Removed <code>cssStickyHeaders_offsetX</code> option &amp; renamed <code>cssStickyHeaders_offsetY</code> to <code>cssStickyHeaders_offset</code> as the horizontal offset is not required.</li>
+				</ul>
+			</li>
+			<li>The jQuery UI themed table does not stick to the top of the page due to the extra padding. Adjust the <code>cssStickyHeaders_offset</code> option as desired. I didn't bother in this demo because it includes more than just the jQuery UI theme.</li>
+			<li>This widget <em>will not work</em> with the original tablesorter, but works optimally with tablesorter v2.8+ (Added <span class="version">v2.14.2</span>; Updated <span class="version updated">v2.14.4</span>)</li>
 		</ul>
 	</p>
 
+	<h1>CSS</h1>
+	<div id="css">
+		<pre class="prettyprint lang-css"></pre>
+	</div>
+
 	<h1>Javascript</h1>
 	<div id="javascript">
 		<pre class="prettyprint lang-javascript"></pre>
@@ -115,9 +134,9 @@ $(function() {
 		<option value="jui">Jquery UI</option>
 	</select>
 	<br><br>
-
+	<h1>Attach sticky header to browser window</h1>
-	<table class="tablesorter">
+	<table id="table1" class="tablesorter">
-	<!-- <caption>Student Grades</caption> -->
+	<caption>Student Grades</caption>
 	<thead>
 		<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th class="filter-false sorter-false">Geometry</th></tr>
 	</thead>
@@ -179,8 +198,10 @@ $(function() {
 	</tbody>
 	</table>
 
-	<div class="narrow-block">
+	<h1>Attach sticky header to its parent</h1>
-	<table class="tablesorter">
+	<div class="narrow-block wrapper">
+	<table id="table2" class="tablesorter">
+		<caption>Student Grades</caption>
 		<thead>
 			<tr><th>Account #</th><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Diff</th></tr>
 		</thead>

docs/index.html

@@ -384,6 +384,7 @@
 		<li><a href="example-widget-savesort.html">Save sort widget</a> (v2.0.27)</li>
 		<li><a href="example-widget-scroller.html">Scroller widget</a> (<span class="version">v2.9</span>).</li>
 		<li><a href="example-widget-sticky-header.html">Sticky header widget</a> (v2.0.21.1; <span class="version updated">v2.10</span>)</li>
+		<li><a href="example-widget-css-sticky-header.html">css3 sticky header widget</a> (<span class="version">v2.14.2</span>; <span class="version updated">v2.14.4</span>).</li>
 		<li>UITheme widget:
 			<ul>
 				<li><a href="example-widget-ui-theme.html">jQuery UI theme</a> (v2.0.9; <span class="version updated">v2.13.3</span>)</li>
@@ -458,7 +459,6 @@
 		<li><a href="http://jsfiddle.net/Mottie/4mVfu/1/">tablesorter basic demo with pager plugin</a></li>
 		<li><a href="http://codepen.io/Mottie/pen/eqBbn">tableSorter LESS theme; modify the colors dynamically in this LESS theme demo!</a></li>
 		<li><span class="label label-info">Beta</span> pager widget (<a href="example-widget-pager.html">basic</a> &amp; <a href="example-widget-pager-ajax.html">ajax</a> demos) (<span class="version">v2.12</span>).</li>
-		<li><span class="label label-info">Beta</span> <a href="example-widget-css-sticky-header.html">css3 sticky header widget</a> (<span class="version">v2.14.2</span>).</li>
 		<li><span class="label label-info">Beta</span> <a href="../beta-testing/example-pager-custom-controls.html">Custom pager control script</a></li>
 		<li><span class="label label-info">Beta</span> <a href="../beta-testing/example-external-filters-using-select2.html">External filters using Select2 plugin</a></li>
 		<li><span class="label label-info">Beta</span> <a href="../beta-testing/example-widget-column-reorder.html">Column reorder widget</a> - not working 100% with sticky headers</li>

js/widgets/widget-cssStickyHeaders.js

@@ -1,7 +1,7 @@
-/*! tablesorter CSS Sticky Headers widget (beta) - updated 12/2/2013 (v2.14.3)
+/*! tablesorter CSS Sticky Headers widget - updated 12/8/2013 (v2.14.4)
-* Requires a modern browser, tablesorter v2.8+ and jQuery 1.7+
+* Requires a modern browser, tablesorter v2.8+
 */
-/*global jQuery: false */
+/*global jQuery: false, unused:false */
 ;(function($){
 	"use strict";
 
@@ -9,36 +9,48 @@
 		id: "cssStickyHeaders",
 		priority: 10,
 		options: {
-			cssStickyHeaders_offsetX : 0,
+			cssStickyHeaders_offset     : 0,
-			cssStickyHeaders_offsetY : 0
+			cssStickyHeaders_addCaption : false,
+			cssStickyHeaders_attachTo   : null
 		},
 		init : function(table, thisWidget, c, wo) {
-			var offset, bottom,
+			var $attach = $(wo.cssStickyHeaders_attachTo),
 				namespace = '.cssstickyheader',
-				$win = $(window),
 				$thead = c.$table.children('thead'),
-				left = 0;
+				$caption = c.$table.find('caption'),
-			$win
+				$win = $attach.length ? $attach : $(window);
-				.bind('scroll resize '.split(' ').join(namespace + ' '), function() {
+			$win.bind('scroll resize '.split(' ').join(namespace + ' '), function() {
-					var offset = c.$table.offset(),
+				var top = $attach.length ? $attach.offset().top : $win.scrollTop(),
-						bottom = c.$table.height() - $thead.height() - (c.$table.find('tfoot').height() || 0),
+				// add caption height; include table padding top & border-spacing or text may be above the fold (jQuery UI themes)
-						deltaY = $win.scrollTop() - offset.top - 1, // subtract out top border
+				// border-spacing needed in Firefox, but not webkit... not sure if I should account for that
-						deltaX = $win.scrollLeft() + offset.left;
+				captionTop = wo.cssStickyHeaders_addCaption ? $caption.outerHeight(true) +
-					// IE can only transform header cells - fixes #447 thanks to @gakreol!
+					(parseInt(c.$table.css('padding-top'), 10) || 0) + (parseInt(c.$table.css('border-spacing'), 10) || 0) : 0,
-					$thead.children().children().css({
+				bottom = c.$table.height() - $thead.height() - (c.$table.find('tfoot').height() || 0) - captionTop,
-						// this non-prefixed transform has cross-browser support in jQuery 1.8+
+				deltaY = top - $thead.offset().top + (parseInt(c.$table.css('border-top-width'), 10) || 0) +
-						"transform": "translate(" +
+					(wo.cssStickyHeaders_offset || 0) + captionTop,
-							(deltaX > 0 && deltaX <= left ? deltaX - wo.cssStickyHeaders_offsetX : 0) + "px," +
+				finalY = (deltaY > 0 && deltaY <= bottom ? deltaY : 0),
-							(deltaY > 0 && deltaY <= bottom ? deltaY - wo.cssStickyHeaders_offsetY : 0) + "px)"
+				// IE can only transform header cells - fixes #447 thanks to @gakreol!
-					});
+				$cells = $thead.children().children();
+				if (wo.cssStickyHeaders_addCaption) {
+					$cells = $cells.add($caption);
+				}
+				$cells.css({
+					"transform": finalY === 0 ? "" : "translate(0px," + finalY + "px)",
+					"-ms-transform": finalY === 0 ? "" : "translate(0px," + finalY + "px)",
+					"-webkit-transform": finalY === 0 ? "" : "translate(0px," + finalY + "px)"
 				});
+			});
 		},
 		remove: function(table, c, wo){
 			var namespace = '.cssstickyheader';
 			$(window).unbind('scroll resize '.split(' ').join(namespace + ' '));
 			c.$table
 				.unbind('update updateAll '.split(' ').join(namespace + ' '))
-				.children('thead').css({ "transform": "translate(0px, 0px)" });
+				.children('thead, caption').css({
+					"transform": "",
+					"-ms-transform" : "",
+					"-webkit-transform" : ""
+				});
 		}
 	});