Merge github.com:easytomanage/StickyTableHeaders into easytomanage

yuyuya12 · Jun 22, 2013 · 0c1b25f · 0c1b25f
2 parents 4c7db98 + 69e3d73
commit 0c1b25f
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 29 deletions.
diff --git a/demo/bootstrap.htm b/demo/bootstrap.htm
@@ -7,6 +7,7 @@
     <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>
   <body style="padding:50px">

diff --git a/js/jquery.stickytableheaders.js b/js/jquery.stickytableheaders.js
@@ -45,28 +45,15 @@
 				base.$clonedHeader = base.$originalHeader.clone();
 
 				base.$clonedHeader.addClass('tableFloatingHeader');
-				base.$clonedHeader.css({
-					'position': 'fixed',
-					'top': 0,
-					'z-index': 1, // #18: opacity bug
-					'display': 'none'
-				});
+				base.$clonedHeader.css('display', 'none');
 
 				base.$originalHeader.addClass('tableFloatingHeaderOriginal');
 
 				base.$originalHeader.after(base.$clonedHeader);
 
-				// enabling support for jquery.tablesorter plugin
-				// forward clicks on clone to original
-				$('th', base.$clonedHeader).on('click.' + name, function (e) {
-					var index = $('th', base.$clonedHeader).index(this);
-					$('th', base.$originalHeader).eq(index).click();
-				});
-				$this.on('sortEnd.' + name, base.updateWidth);
-
 				base.$printStyle = $('<style type="text/css" media="print">' +
 					'.tableFloatingHeader{display:none !important;}' +
-					'.tableFloatingHeaderOriginal{visibility:visible !important;}' +
+					'.tableFloatingHeaderOriginal{position:static !important;}' +
 					'</style>');
 				$('head').append(base.$printStyle);
 			});
@@ -127,40 +114,61 @@
 						return;
 					}
 
-					base.$clonedHeader.css({
+					base.$originalHeader.css({
+						'position': 'fixed',
 						'top': newTopOffset,
 						'margin-top': 0,
 						'left': newLeft,
-						'display': 'block'
+						'z-index': 1
 					});
-					base.$originalHeader.css('visibility', 'hidden');
+					base.$clonedHeader.css('display', '');
 					base.isCloneVisible = true;
 					base.leftOffset = newLeft;
 					base.topOffset = newTopOffset;
+					base.updateWidth();
 				}
 				else if (base.isCloneVisible) {
+					base.$originalHeader.css('position', 'static');
 					base.$clonedHeader.css('display', 'none');
-					base.$originalHeader.css('visibility', 'visible');
 					base.isCloneVisible = false;
+					base.updateWidth();
 				}
 			});
 		};
 
 		base.updateWidth = function () {
 			// Copy cell widths and classes from original header
-			$('th', base.$clonedHeader).each(function (index) {
-				var $this = $(this);
-				var $origCell = $('th', base.$originalHeader).eq(index);
-				this.className = $origCell.attr('class') || '';
+			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)
-				$this.css({
-					'min-width': $origCell.width(),
-					'max-width': $origCell.width()
-				});
+				widths[index] = $(this).width();
 			});
 
-			// Copy row width from whole table
-			base.$clonedHeader.css('width', base.$originalHeader.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]
+					});
+				});
+
+				// 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', '');
+			}
 		};
 
 		// Run initializer