simplified a few things and fixed a bug introduced by previous pull r…

…equest where min-widths on header cells would be overwritten.

StickyTableHeaders.jquery.json

@@ -8,7 +8,7 @@
 		"fixed",
 		"scroll"
 	],
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"author": {
 		"name": "Jonas Mosbech",
 		"url": "https://twitter.com/jmosbech/"

demo/bootstrap.htm

@@ -6,7 +6,6 @@
     <title>Twitter Bootstrap Demo</title>
     <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
     <style type="text/css">
-      .tableFloatingHeader th { background-color: #fff; border-bottom: 1px solid #DDD;}
       .tableFloatingHeaderOriginal th { background-color: #fff; border-bottom: 1px solid #DDD;}
     </style>
   </head>
@@ -74,15 +73,13 @@ <h1>Twitter Bootstrap Demo</h1>
   <script src="../js/jquery.stickytableheaders.js" type="text/javascript"></script>
   <script type="text/javascript">
 
-    $(document).ready(function () {
-      // adding filler rows
-      for(var i = 0; i < 3; i++){
-        $('tbody tr').clone().appendTo('table');
-      }
+    // adding filler rows
+    for(var i = 0; i < 3; i++){
+      $('tbody tr').clone().appendTo('table');
+    }
 
-      var offset = $('.navbar').height();
-      $("html:not(.legacy) table").stickyTableHeaders({fixedOffset: offset});
-    });
+    var offset = $('.navbar').height();
+    $("html:not(.legacy) table").stickyTableHeaders({fixedOffset: offset});
 
   </script>
 

demo/sticky-thead.htm

@@ -19,7 +19,7 @@ <h1>
 					</th>
 				</tr>
 				<tr>
-					<th>
+					<th style="min-width:200px">
 						Full name
 					</th>
 					<th>
@@ -810,11 +810,7 @@ <h1>
 <script src="../js/jquery.stickytableheaders.js" type="text/javascript"></script>
 
 <script type="text/javascript">
-
-		$(document).ready(function () {
-			$("table").stickyTableHeaders();
-		});
-
+	$("table").stickyTableHeaders();
 </script>
 
 	</body>

js/jquery.stickytableheaders.js

@@ -28,7 +28,7 @@
 		base.$originalHeader = null;
 
 		// Keep track of state
-		base.isCloneVisible = false;
+		base.isSticky = false;
 		base.leftOffset = null;
 		base.topOffset = null;
 
@@ -86,7 +86,6 @@
 			base.$window.on('scroll.' + name, base.toggleHeaders);
 			base.$window.on('resize.' + name, base.toggleHeaders);
 			base.$window.on('resize.' + name, base.updateWidth);
-			// TODO: move tablesorter bindings here
 		};
 
 		base.unbind = function(){
@@ -110,7 +109,7 @@
 
 				if ((scrollTop > offset.top) && (scrollTop < offset.top + $this.height() - base.$clonedHeader.height())) {
 					var newLeft = offset.left - scrollLeft;
-					if (base.isCloneVisible && (newLeft === base.leftOffset) && (newTopOffset === base.topOffset)) {
+					if (base.isSticky && (newLeft === base.leftOffset) && (newTopOffset === base.topOffset)) {
 						return;
 					}
 
@@ -119,56 +118,40 @@
 						'top': newTopOffset,
 						'margin-top': 0,
 						'left': newLeft,
-						'z-index': 1
+						'z-index': 1 // #18: opacity bug
 					});
 					base.$clonedHeader.css('display', '');
-					base.isCloneVisible = true;
+					base.isSticky = true;
 					base.leftOffset = newLeft;
 					base.topOffset = newTopOffset;
+
+					// make sure the width is correct: the user might have resized the browser while in static mode
 					base.updateWidth();
 				}
-				else if (base.isCloneVisible) {
+				else if (base.isSticky) {
 					base.$originalHeader.css('position', 'static');
 					base.$clonedHeader.css('display', 'none');
-					base.isCloneVisible = false;
-					base.updateWidth();
+					base.isSticky = false;
 				}
 			});
 		};
 
 		base.updateWidth = function () {
-			// Copy cell widths and classes from original header
-			var widths = new Array();
-			var $staticHeader = base.isCloneVisible ? base.$clonedHeader : base.$originalHeader;
-			$('th,td', $staticHeader).each(function (index) {
-				// use min/max-width to fix overflow issue (#30)
-				widths[index] = $(this).width();
-			});
-
-			if (base.isCloneVisible) {
-				$('th,td', base.$clonedHeader).each(function (index) {
-					var $this = $(this);
-					var $origCell = $('th,td', base.$originalHeader).eq(index);
-					this.className = $origCell.attr('class') || '';
-					// use min/max-width to fix overflow issue (#30)
-					$origCell.css({
-						'min-width': widths[index],
-						'max-width': widths[index]
-					});
+			if (!base.isSticky) {
+				return;
+			}
+			// Copy cell widths from clone
+			var $origHeaders = $('th,td', base.$originalHeader);
+			$('th,td', base.$clonedHeader).each(function (index) {
+				var width = $(this).width();
+				$origHeaders.eq(index).css({
+					'min-width': width,
+					'max-width': width
 				});
+			});
 
-				// Copy row width from whole table
-				base.$originalHeader.css('width', $staticHeader.width());
-			} else {
-				$('th,td', base.$originalHeader).each(function (index) {
-					// reset min/max-width to allow table to shrink
-					$(this).css({
-						'min-width': '',
-						'max-width': ''
-					});
-				});
-				base.$originalHeader.css('width', '');
-			}
+			// Copy row width from whole table
+			base.$originalHeader.css('width', base.$clonedHeader.width());
 		};
 
 		// Run initializer

package.json

@@ -4,7 +4,7 @@
   "keywords"      : ["jquery", "sticky", "table", "headers"],
   "repository"    : "https://github.com/jmosbech/StickyTableHeaders",
   "author"        : "Jonas Mosbech <https://github.com/jmosbech>",
-  "version"       : "0.1.0",
+  "version"       : "0.1.1",
   "devDependencies": {
     "grunt": "0.4.0",
     "grunt-contrib-jshint": "~0.3.0",