Resizable: major overhaul! Now compatible with stickyHeaders

dist/js/jquery.tablesorter.widgets.js

@@ -1947,15 +1947,264 @@ ts.addWidget({
 
 })(jQuery, window);
 
-/*! Widget: resizable */
+/*! Widget: resizable - updated 3/25/2015 (v2.21.3) */
 ;(function ($, window) {
 'use strict';
 var ts = $.tablesorter = $.tablesorter || {};
 
 $.extend(ts.css, {
-	resizer : 'tablesorter-resizer' // resizable
+	resizableContainer : 'tablesorter-resizable-container',
+	resizableHandle    : 'tablesorter-resizable-handle',
+	resizableNoSelect  : 'tablesorter-disableSelection',
+	resizableStorage   : 'tablesorter-resizable'
 });
 
+// Add extra scroller css
+$(function(){
+	var s = '<style>' +
+		'body.' + ts.css.resizableNoSelect + ' { -ms-user-select: none; -moz-user-select: -moz-none;' +
+			'-khtml-user-select: none; -webkit-user-select: none; user-select: none; }' +
+		'.' + ts.css.resizableContainer + ' { position: relative; height: 1px; }' +
+		// make handle z-index > than stickyHeader z-index, so the handle stays above sticky header
+		'.' + ts.css.resizableHandle + ' { position: absolute; display: inline-block; width: 8px; top: 1px;' +
+			'cursor: ew-resize; z-index: 3; user-select: none; -moz-user-select: none; }' +
+		'</style>';
+	$(s).appendTo('body');
+});
+
+ts.resizable = {
+	init : function( c, wo ) {
+		if ( c.$table.hasClass( 'hasResizable' ) ) { return; }
+		c.$table.addClass( 'hasResizable' );
+		ts.resizableReset( c.table, true ); // set default widths
+
+		// internal variables
+		wo.resizable_ = {
+			$wrap : c.$table.parent(),
+			mouseXPosition : 0,
+			$target : null,
+			$next : null,
+			overflow : c.$table.parent().css('overflow') === 'auto',
+			fullWidth : Math.abs(c.$table.parent().width() - c.$table.width()) < 20,
+			storedSizes : []
+		};
+
+		var noResize, $header, column, storedSizes,
+			marginTop = parseInt( c.$table.css( 'margin-top' ), 10 );
+
+		wo.resizable_.storedSizes = storedSizes = ( ( ts.storage && wo.resizable !== false ) ?
+			ts.storage( c.table, ts.css.resizableStorage ) :
+			[] ) || [];
+		ts.resizable.setWidths( c, wo, storedSizes );
+
+		wo.$resizable_container = $( '<div class="' + ts.css.resizableContainer + '">' )
+			.css({ top : marginTop })
+			.insertBefore( c.$table );
+		// add container
+		for ( column = 0; column < c.columns; column++ ) {
+			$header = c.$headerIndexed[ column ];
+			noResize = ts.getData( $header, ts.getColumnData( c.table, c.headers, column ), 'resizable' ) === 'false';
+			if ( !noResize ) {
+				$( '<div class="' + ts.css.resizableHandle + '">' )
+					.appendTo( wo.$resizable_container )
+					.attr({
+						'data-column' : column,
+						'unselectable' : 'on'
+					})
+					.data( 'header', $header )
+					.bind( 'selectstart', false );
+			}
+		}
+		c.$table.one('tablesorter-initialized', function() {
+			ts.resizable.setHandlePosition( c, wo );
+			ts.resizable.bindings( this.config, this.config.widgetOptions );
+		});
+	},
+
+	setWidth : function( $el, width ) {
+		$el.css({
+			'width' : width,
+			'min-width' : '',
+			'max-width' : ''
+		});
+	},
+
+	setWidths : function( c, wo, storedSizes ) {
+		var column,
+			$extra = $( c.namespace + '_extra_headers' ),
+			$col = c.$table.children( 'colgroup' ).children( 'col' );
+		storedSizes = storedSizes || wo.resizable_.storedSizes || [];
+		// process only if table ID or url match
+		if ( storedSizes.length ) {
+			for ( column = 0; column < c.columns; column++ ) {
+				// set saved resizable widths
+				c.$headers.eq( column ).width( storedSizes[ column ] );
+				if ( $extra.length ) {
+					// stickyHeaders needs to modify min & max width as well
+					ts.resizable.setWidth( $extra.eq( column ).add( $col.eq( column ) ), storedSizes[ column ] );
+				}
+			}
+			if ( $( c.namespace + '_extra_table' ).length && !ts.hasWidget( c.table, 'scroller' ) ) {
+				ts.resizable.setWidth( $( c.namespace + '_extra_table' ), c.$table.outerWidth() );
+			}
+		}
+	},
+
+	setHandlePosition : function( c, wo ) {
+		var tableWidth = c.$table.outerWidth(),
+			hasScroller = ts.hasWidget( c.table, 'scroller' ),
+			tableHeight = c.$table.height(),
+			$handles = wo.$resizable_container.children(),
+			handleCenter = Math.floor( $handles.width() / 2 - parseFloat( c.$headers.css( 'border-right-width' ) ) * 2 );
+
+		if ( hasScroller ) {
+			tableHeight = 0;
+			c.$table.closest( '.' + ts.css.scrollerWrap ).children().each(function(){
+				var $this = $(this);
+				// center table has a max-height set
+				tableHeight += $this.filter('[style*="height"]').length ? $this.height() : $this.children('table').height();
+			});
+		}
+		$handles.each( function() {
+			var $this = $(this),
+				column = parseInt( $this.attr( 'data-column' ), 10 ),
+				columns = c.columns - 1,
+				$header = $this.data( 'header' );
+			if ( column < columns || column === columns && wo.resizable_addLastColumn ) {
+				$this.css({
+					height : tableHeight,
+					left : $header.position().left + $header.width() - handleCenter
+				});
+			}
+		});
+	},
+
+	// prevent text selection while dragging resize bar
+	toggleTextSelection : function( c, toggle ) {
+		var namespace = c.namespace + 'tsresize';
+		c.widgetOptions.resizable_.disabled = toggle;
+		$( 'body' ).toggleClass( ts.css.resizableNoSelect, toggle );
+		if ( toggle ) {
+			$( 'body' )
+				.attr( 'unselectable', 'on' )
+				.bind( 'selectstart' + namespace, false );
+		} else {
+			$( 'body' )
+				.removeAttr( 'unselectable' )
+				.unbind( 'selectstart' + namespace );
+		}
+	},
+
+	bindings : function( c, wo ) {
+		var namespace = c.namespace + 'tsresize';
+		wo.$resizable_container.children().bind( 'mousedown', function( event ) {
+			// save header cell and mouse position
+			var column,
+				vars = wo.resizable_,
+				$extras = $( c.namespace + '_extra_headers' ),
+				$header = $( event.target ).data( 'header' );
+
+			column = parseInt( $header.attr( 'data-column' ), 10 );
+			vars.$target = $header = $header.add( $extras.filter('[data-column="' + column + '"]') );
+			vars.target = column;
+
+			// if table is not as wide as it's parent, then resize the table
+			vars.$next = event.shiftKey || wo.resizable_targetLast ?
+				$header.parent().children().not( '.resizable-false' ).filter( ':last' ) :
+				$header.nextAll( ':not(.resizable-false)' ).eq( 0 );
+
+			column = parseInt( vars.$next.attr( 'data-column' ), 10 );
+			vars.$next = vars.$next.add( $extras.filter('[data-column="' + column + '"]') );
+			vars.next = column;
+
+			vars.mouseXPosition = event.pageX;
+			vars.storedSizes = c.$headers.map(function(){ return $(this).width(); }).get();
+			ts.resizable.toggleTextSelection( c, true );
+		});
+
+		$( document )
+			.bind( 'mousemove' + namespace, function( event ) {
+				var vars = wo.resizable_;
+				// ignore mousemove if no mousedown
+				if ( !vars.disabled || vars.mouseXPosition === 0 || !vars.$target ) { return; }
+				if ( wo.resizable_throttle ) {
+					clearTimeout( vars.timer );
+					vars.timer = setTimeout( function() {
+						ts.resizable.mouseMove( c, wo, event );
+					}, isNaN( wo.resizable_throttle ) ? 5 : wo.resizable_throttle );
+				} else {
+					ts.resizable.mouseMove( c, wo, event );
+				}
+			})
+			.bind( 'mouseup' + namespace, function() {
+				if (!wo.resizable_.disabled) { return; }
+				ts.resizable.toggleTextSelection( c, false );
+				ts.resizable.stopResize( c, wo );
+				ts.resizable.setHandlePosition( c, wo );
+			});
+
+		// resizeEnd event triggered by scroller widget
+		$( window ).bind( 'resize' + namespace + ' resizeEnd' + namespace, function() {
+			ts.resizable.setHandlePosition( c, wo );
+		});
+
+		// right click to reset columns to default widths
+		c.$table.find( 'thead:first' ).add( $( c.namespace + '_extra_table' ).find( 'thead:first' ) )
+		.bind( 'contextmenu' + namespace, function() {
+			// $.isEmptyObject() needs jQuery 1.4+; allow right click if already reset
+			var allowClick = wo.resizable_.storedSizes.length === 0;
+			ts.resizableReset( c.table );
+			ts.resizable.setHandlePosition( c, wo );
+			wo.resizable_.storedSizes = [];
+			return allowClick;
+		});
+
+	},
+
+	mouseMove : function( c, wo, event ) {
+		if ( wo.resizable_.mouseXPosition === 0 || !wo.resizable_.$target ) { return; }
+		// resize columns
+		var vars = wo.resizable_,
+			$target = vars.$target,
+			$next = vars.$next,
+			leftEdge = event.pageX - vars.mouseXPosition,
+			targetWidth = $target.width();
+		if ( vars.fullWidth ) {
+			vars.storedSizes[ vars.target ] += leftEdge;
+			vars.storedSizes[ vars.next ] -= leftEdge;
+			ts.resizable.setWidths( c, wo );
+
+		} else if ( vars.overflow ) {
+			c.$table.add( $( c.namespace + '_extra_table' ) ).width(function(i, w){
+				return w + leftEdge;
+			});
+			if ( !$next.length ) {
+				// if expanding right-most column, scroll the wrapper
+				vars.$wrap[0].scrollLeft = c.$table.width();
+			}
+		} else {
+			vars.storedSizes[ vars.target ] += leftEdge;
+			ts.resizable.setWidths( c, wo );
+		}
+		vars.mouseXPosition = event.pageX;
+	},
+
+	stopResize : function( c, wo ) {
+		var vars = wo.resizable_;
+		vars.storedSizes = [];
+		if ( ts.storage ) {
+			vars.storedSizes = c.$headers.map(function(){ return $(this).width(); }).get();
+			if ( wo.resizable !== false ) {
+				// save all column widths
+				ts.storage( c.table, ts.css.resizableStorage, vars.storedSizes );
+			}
+		}
+		vars.mouseXPosition = 0;
+		vars.$target = vars.$next = null;
+		$(window).trigger('resize'); // will update stickyHeaders, just in case
+	}
+};
+
 // this widget saves the column widths if
 // $.tablesorter.storage function is included
 // **************************
@@ -1966,163 +2215,52 @@ ts.addWidget({
 		resizable : true,
 		resizable_addLastColumn : false,
 		resizable_widths : [],
-		resizable_throttle : false // set to true (5ms) or any number 0-10 range
+		resizable_throttle : false, // set to true (5ms) or any number 0-10 range
+		resizable_targetLast : false
 	},
-	format: function(table, c, wo) {
+	init: function(table, thisWidget, c, wo) {
-		if (c.$table.hasClass('hasResizable')) { return; }
+		ts.resizable.init( c, wo );
-		c.$table.addClass('hasResizable');
-		ts.resizableReset(table, true); // set default widths
-		var $rows, $columns, $column, column, timer,
-			storedSizes = {},
-			$table = c.$table,
-			$wrap = $table.parent(),
-			overflow = $table.parent().css('overflow') === 'auto',
-			mouseXPosition = 0,
-			$target = null,
-			$next = null,
-			fullWidth = Math.abs($table.parent().width() - $table.width()) < 20,
-			mouseMove = function(event){
-				if (mouseXPosition === 0 || !$target) { return; }
-				// resize columns
-				var leftEdge = event.pageX - mouseXPosition,
-					targetWidth = $target.width();
-				$target.width( targetWidth + leftEdge );
-				if ($target.width() !== targetWidth && fullWidth) {
-					$next.width( $next.width() - leftEdge );
-				} else if (overflow) {
-					$table.width(function(i, w){
-						return w + leftEdge;
-					});
-					if (!$next.length) {
-						// if expanding right-most column, scroll the wrapper
-						$wrap[0].scrollLeft = $table.width();
-					}
-				}
-				mouseXPosition = event.pageX;
 	},
-			stopResize = function() {
+	remove: function( table, c, wo ) {
-				if (ts.storage && $target && $next) {
+		if (wo.$resizable_container) {
-					storedSizes = {};
+			var namespace = c.namespace + 'tsresize';
-					storedSizes[$target.index()] = $target.width();
+			c.$table.add( $( c.namespace + '_extra_table' ) )
-					storedSizes[$next.index()] = $next.width();
-					$target.width( storedSizes[$target.index()] );
-					$next.width( storedSizes[$next.index()] );
-					if (wo.resizable !== false) {
-						// save all column widths
-						ts.storage(table, 'tablesorter-resizable', c.$headers.map(function(){ return $(this).width(); }).get() );
-					}
-				}
-				mouseXPosition = 0;
-				$target = $next = null;
-				$(window).trigger('resize'); // will update stickyHeaders, just in case
-			};
-		storedSizes = (ts.storage && wo.resizable !== false) ? ts.storage(table, 'tablesorter-resizable') : {};
-		// process only if table ID or url match
-		if (storedSizes) {
-			for (column in storedSizes) {
-				if (!isNaN(column) && column < c.$headers.length) {
-					c.$headers.eq(column).width(storedSizes[column]); // set saved resizable widths
-				}
-			}
-		}
-		$rows = $table.children('thead:first').children('tr');
-		// add resizable-false class name to headers (across rows as needed)
-		$rows.children().each(function() {
-			var canResize,
-				$column = $(this);
-			column = $column.attr('data-column');
-			canResize = ts.getData( $column, ts.getColumnData( table, c.headers, column ), 'resizable') === "false";
-			$rows.children().filter('[data-column="' + column + '"]')[canResize ? 'addClass' : 'removeClass']('resizable-false');
-		});
-		// add wrapper inside each cell to allow for positioning of the resizable target block
-		$rows.each(function() {
-			$column = $(this).children().not('.resizable-false');
-			if (!$(this).find('.' + ts.css.wrapper).length) {
-				// Firefox needs this inner div to position the resizer correctly
-				$column.wrapInner('<div class="' + ts.css.wrapper + '" style="position:relative;height:100%;width:100%"></div>');
-			}
-			// don't include the last column of the row
-			if (!wo.resizable_addLastColumn) { $column = $column.slice(0,-1); }
-			$columns = $columns ? $columns.add($column) : $column;
-		});
-		$columns
-		.each(function() {
-			var $column = $(this),
-				padding = parseInt($column.css('padding-right'), 10) + 10; // 10 is 1/2 of the 20px wide resizer
-			$column
-				.find('.' + ts.css.wrapper)
-				.append('<div class="' + ts.css.resizer + '" style="cursor:w-resize;position:absolute;z-index:1;right:-' +
-					padding + 'px;top:0;height:100%;width:20px;"></div>');
-		})
-		.find('.' + ts.css.resizer)
-		.bind('mousedown', function(event) {
-			// save header cell and mouse position
-			$target = $(event.target).closest('th');
-			var $header = c.$headers.filter('[data-column="' + $target.attr('data-column') + '"]');
-			if ($header.length > 1) { $target = $target.add($header); }
-			// if table is not as wide as it's parent, then resize the table
-			$next = event.shiftKey ? $target.parent().find('th').not('.resizable-false').filter(':last') : $target.nextAll(':not(.resizable-false)').eq(0);
-			mouseXPosition = event.pageX;
-		});
-		$(document)
-		.bind('mousemove.tsresize', function(event) {
-			// ignore mousemove if no mousedown
-			if (mouseXPosition === 0 || !$target) { return; }
-			if (wo.resizable_throttle) {
-				clearTimeout(timer);
-				timer = setTimeout(function(){
-					mouseMove(event);
-				}, isNaN(wo.resizable_throttle) ? 5 : wo.resizable_throttle );
-			} else {
-				mouseMove(event);
-			}
-		})
-		.bind('mouseup.tsresize', function() {
-			stopResize();
-		});
-
-		// right click to reset columns to default widths
-		$table.find('thead:first').bind('contextmenu.tsresize', function() {
-			ts.resizableReset(table);
-			// $.isEmptyObject() needs jQuery 1.4+; allow right click if already reset
-			var allowClick = $.isEmptyObject ? $.isEmptyObject(storedSizes) : true;
-			storedSizes = {};
-			return allowClick;
-		});
-	},
-	remove: function(table, c) {
-		c.$table
 				.removeClass('hasResizable')
-			.children('thead')
+				.children( 'thead' ).unbind( 'contextmenu' + namespace );
-			.unbind('mouseup.tsresize mouseleave.tsresize contextmenu.tsresize')
+
-			.children('tr').children()
+				wo.$resizable_container.remove();
-			.unbind('mousemove.tsresize mouseup.tsresize')
+			ts.resizable.toggleTextSelection( c, false );
-			// don't remove "tablesorter-wrapper" as uitheme uses it too
+			ts.resizableReset( table );
-			.find('.' + ts.css.resizer).remove();
+			$( document ).unbind( 'mousemove' + namespace + ' mouseup' + namespace );
-		ts.resizableReset(table);
+		}
 	}
 });
-ts.resizableReset = function(table, nosave) {
+
-	$(table).each(function(){
+ts.resizableReset = function( table, nosave ) {
+	$( table ).each(function(){
 		var $t,
 			c = this.config,
 			wo = c && c.widgetOptions;
-		if (table && c) {
+		if ( table && c ) {
-			c.$headers.each(function(i){
+			c.$headers.each( function( i ) {
 				$t = $(this);
-				if (wo.resizable_widths && wo.resizable_widths[i]) {
+				if ( wo.resizable_widths && wo.resizable_widths[ i ] ) {
-					$t.css('width', wo.resizable_widths[i]);
+					$t.css( 'width', wo.resizable_widths[ i ] );
-				} else if (!$t.hasClass('resizable-false')) {
+				} else if ( !$t.hasClass( 'resizable-false' ) ) {
 					// don't clear the width of any column that is not resizable
-					$t.css('width','');
+					$t.css( 'width', '' );
 				}
 			});
-			if (ts.storage && !nosave) { ts.storage(this, 'tablesorter-resizable', {}); }
+			// reset stickyHeader widths
+			$( window ).trigger( 'resize' );
+			if ( ts.storage && !nosave ) {
+				ts.storage( this, ts.css.resizableStorage, {} );
+			}
 		}
 	});
 };
 
-})(jQuery, window);
+})( jQuery, window );
 
 /*! Widget: saveSort */
 ;(function ($) {

docs/example-widget-resizable.html

@@ -8,6 +8,8 @@
 	<script src="js/jquery-1.4.4.min.js"></script>
 
 	<!-- Demo stuff -->
+	<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
+	<script src="js/jquery-ui.min.js"></script>
 	<link rel="stylesheet" href="css/jq.css">
 	<link href="css/prettify.css" rel="stylesheet">
 	<script src="js/prettify.js"></script>
@@ -34,19 +36,19 @@
 
 <script id="js">$(function() {
 
-	$("table:first").tablesorter({
+	$('.narrow-table').tablesorter({
 		theme : 'blue',
 		// initialize zebra striping and resizable widgets on the table
-		widgets: [ "zebra", "resizable" ],
+		widgets: [ "zebra", "resizable", "stickyHeaders" ],
 		widgetOptions: {
 			resizable_addLastColumn : true
 		}
 	});
 
-	$("table:last").tablesorter({
+	$('.full-width-table').tablesorter({
 		theme : 'blue',
 		// initialize zebra striping and resizable widgets on the table
-		widgets: [ "zebra", "resizable" ],
+		widgets: [ "zebra", "resizable", "stickyHeaders" ],
 		widgetOptions: {
 			resizable: true,
 			// These are the default column widths which are used when the table is
@@ -67,11 +69,23 @@
 </div>
 <div id="main">
 
-	<p class="tip">
+
-		<em>NOTE!</em>
+	<p></p>
+	<br>
+	<div id="root" class="accordion">
+
+		<h3><a href="#">Notes</a></h3>
+		<div>
 			<ul>
 				<li><span class="label label-info">IMPORTANT</span> If using jQuery versions older than 1.8, css box-sizing for the table <em>MUST</em> be set as <code>box-sizing: content-box;</code> or the resizable widget will not work properly.</li>
-			<li><span class="label label-info">IMPORTANT</span> The resize div ends up with a zero height if the header cell is empty. Please include at least a <code>&amp;nbsp;</code> in the cell to allow it to render properly (<a href="https://github.com/Mottie/tablesorter/issues/844" title="Thanks gigib82!">ref</a>).</li>
+				<li><span class="label label-info">IMPORTANT</span> The resize div ends up with a zero height if the header cell is empty. Please include at least a <code>&amp;nbsp;</code> in the cell to allow it to render properly (<a href="https://github.com/Mottie/tablesorter/issues/844" title="Thanks gigib82!">ref</a>).<br><br></li>
+
+				<li>In <span class="version">v2.21.3</span>
+					<ul>
+						<li>Performed a major overhaul on the resizable widget to add resizable handles outside of the table, so now the resizable handles can be used over the entire height of the table!</li>
+						<li>This change allows the resizable widget to work seemlessly with the <strong>stickyHeaders</strong> widget (included in this demo); sadly, to make it work with the scroller widget will require more work.</li>
+					</ul>
+				</li>
 				<li>In <span class="version">v2.17.4</span>, modified the bindings so the mouse move will now work on the document instead of only within the table header; this makes interaction consistent with what the user expects.</li>
 				<li>In <span class="version">v2.15.12</span>, added <code>resizable_widths</code> option which allows the setting of default &amp; reset header widths.</li>
 				<li>As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.</li>
@@ -92,12 +106,94 @@
 				<li>In order to save the resized widths, jQuery version 1.4.1+ should be used because jQuery's <code>parseJson()</code> function is needed.</li>
 				<li>Setting the <code>resizable_addLastColumn</code> widget option to <code>true</code> will add the resizable handle to the last column, see the "non-full" width table below (<span class="version">v2.9.0</span>).</li>
 			</ul>
-	<p>
+		</div>
+
+		<h3><a href="#">Options</a></h3>
+		<div>
+			<h4>Resizable widget defaults (added inside of tablesorter <code>widgetOptions</code>)</h4>
+			<div>
+				<span class="label label-info">TIP!</span> Click on the link in the function column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location.
+			</div>
+			<table class="options tablesorter-blue" data-sortlist="[[0,0]]">
+				<thead>
+					<tr><th>Option</th><th class="defaults">Default</th><th class="sorter-false">Description</th></tr>
+				</thead>
+				<tbody>
+
+					<tr id="resizable">
+						<td><a href="#" class="permalink">resizable</a></td>
+						<td>true</td>
+						<td>When <code>true</code> and the storage widget is included, all column widths will be saved to storage.
+							<div class="collapsible">
+								<p>This means that when the page is reloaded, any adjusted column widths will be restored.</p>
+								<p>The adjusted column sizes can be reset at any time by right-clicking on the table header.</p>
+							</div>
+						</td>
+					</tr>
+
+					<tr id="resizable-add-last-column">
+						<td><a href="#" class="permalink">resizable_addLastColumn</a></td>
+						<td>false</td>
+						<td>When <code>true</code>, the last column of the table is made resizable.
+							<div class="collapsible">
+								<p>If the table is full width, adjusting the right edge would actually shrink or stretch <em>all</em> columns without moving the right border.</p>
+								<p>On narrower tables, the table width will be adjusted.</p>
+							</div>
+						</td>
+					</tr>
+
+					<tr id="resizable-widths">
+						<td><a href="#" class="permalink">resizable_widths</a></td>
+						<td>[ ]</td>
+						<td>Set any default column widths within this zero-based-column-indexed array
+							<div class="collapsible">
+								<p>This option allows the setting of column widths initially (before any resizing occurs, or if there are no saved column widths) and when resetting (right-click on the column header).</p>
+								<p>The array may contain any css allowed width definitions (e.g. percentage, pixels, em, etc).</p>
+								<p>Undefined column widths to not add a specified width to the column</p>
+								<p>Here is an example from the second table in this demo showing how to set this option:</p>
+								<pre class="prettyprint lang-js">// Note that the "Age" column is not resizable,
+// but the width can still be set to 40px here
+resizable_widths : [ '10%', '10%', '40px', '10%', '100px' ]</pre>
+							</div>
+						</td>
+					</tr>
+
+					<tr id="resizable-throttle">
+						<td><a href="#" class="permalink">resizable_throttle</a></td>
+						<td>false</td>
+						<td>When this option is set to a number, or true, the resizing event from the window is throttled.
+							<div class="collapsible">
+								<p>Essentially, throttling the resize event limits the number of times the javascript is executed while resizing the window.</p>
+								<p>Without any throttling, slower browsers may lag while the javascript adjusts the column widths of the table.</p>
+								<p>With excessive throttling, the user will notice the table column width lag (while will be seen as the width jumping sporatically to catch up to the mouse) behind the mouse movement.</p>
+								<p>When this option is set to <code>true</code>, a default of <code>5</code> (milliseconds) is used.</p>
+								<p>If setting a number, try to keep this number in the <code>0</code> to <code>10</code> range.</p>
+							</div>
+						</td>
+					</tr>
+
+					<tr id="resizable-target-last">
+						<td><a href="#" class="permalink">resizable_targetLast</a></td>
+						<td>false</td>
+						<td>When <code>true</code>, the last column will be targetted for resizing.
+							<div class="collapsible">
+								<p>When <code>true</code>, resizing a column will change the size of the selected column, and the last column, not the selected column's neighbor.</p>
+								<p>When <code>false</code>, resizing a column will move the column border between it's neighbors.</p>
+								<p>Also, in a <em>full width table</em>, if this option is <code>false</code>, the same behavior as when this option is <code>true</code> can be seen when resizing a column while holding down the <kbd>Shift</kbd> key on the keyboard - the last column is resized.</p>
+							</div>
+						</td>
+					</tr>
+
+				</tbody>
+			</table>
+		</div>
+
+	</div>
 
 	<h1>Demo</h1>
 	<div id="demo">
 <h3>Non-full width table <small>(individual columns resize)</small></h3>
-<table class="tablesorter" style="width:auto">
+<table class="narrow-table" style="width:auto">
 	<thead>
 		<tr>
 			<th>First Name</th>
@@ -153,7 +249,7 @@
 </table>
 
 <h3>Full width table <small>(use shift to force last column to resize)</small></h3>
-<table class="tablesorter">
+<table class="full-width-table">
 	<thead>
 		<tr>
 			<th>First Name</th>

docs/index.html

@@ -517,7 +517,7 @@
 		<li><a href="example-widget-print.html">Print widget</a> (<span class="version">v2.16.4</span>; <span class="version updated">v2.19.0</span>)</li>
 		<li><a href="example-widget-reflow.html">Reflow widget</a> (<span class="version">v2.16</span>; <span class="version updated">v2.19.0</span>)</li>
 		<li><a href="example-widgets.html">Repeat Headers widget</a> (v2.0.5; <span class="version updated">v2.19.0</span>)</li>
-		<li><span class="results">&dagger;</span> <a href="example-widget-resizable.html">Resizable Columns widget</a> (v2.0.23.1; <span class="version updated">v2.19.0</span>)</li>
+		<li><span class="results">&dagger;</span> <a href="example-widget-resizable.html">Resizable Columns widget</a> (v2.0.23.1; <span class="version updated">v2.21.3</span>)</li>
 		<li><span class="results">&dagger;</span> <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>; <span class="version updated">v2.21.3</span>).</li>
 		<li><a href="example-widget-static-row.html">StaticRow widget</a> (<span class="version">v2.16</span>; <span class="version updated">v2.19.1</span>).</li>

js/jquery.tablesorter.widgets.js

@@ -1953,15 +1953,264 @@ ts.addWidget({
 
 })(jQuery, window);
 
-/*! Widget: resizable */
+/*! Widget: resizable - updated 3/25/2015 (v2.21.3) */
 ;(function ($, window) {
 'use strict';
 var ts = $.tablesorter = $.tablesorter || {};
 
 $.extend(ts.css, {
-	resizer : 'tablesorter-resizer' // resizable
+	resizableContainer : 'tablesorter-resizable-container',
+	resizableHandle    : 'tablesorter-resizable-handle',
+	resizableNoSelect  : 'tablesorter-disableSelection',
+	resizableStorage   : 'tablesorter-resizable'
 });
 
+// Add extra scroller css
+$(function(){
+	var s = '<style>' +
+		'body.' + ts.css.resizableNoSelect + ' { -ms-user-select: none; -moz-user-select: -moz-none;' +
+			'-khtml-user-select: none; -webkit-user-select: none; user-select: none; }' +
+		'.' + ts.css.resizableContainer + ' { position: relative; height: 1px; }' +
+		// make handle z-index > than stickyHeader z-index, so the handle stays above sticky header
+		'.' + ts.css.resizableHandle + ' { position: absolute; display: inline-block; width: 8px; top: 1px;' +
+			'cursor: ew-resize; z-index: 3; user-select: none; -moz-user-select: none; }' +
+		'</style>';
+	$(s).appendTo('body');
+});
+
+ts.resizable = {
+	init : function( c, wo ) {
+		if ( c.$table.hasClass( 'hasResizable' ) ) { return; }
+		c.$table.addClass( 'hasResizable' );
+		ts.resizableReset( c.table, true ); // set default widths
+
+		// internal variables
+		wo.resizable_ = {
+			$wrap : c.$table.parent(),
+			mouseXPosition : 0,
+			$target : null,
+			$next : null,
+			overflow : c.$table.parent().css('overflow') === 'auto',
+			fullWidth : Math.abs(c.$table.parent().width() - c.$table.width()) < 20,
+			storedSizes : []
+		};
+
+		var noResize, $header, column, storedSizes,
+			marginTop = parseInt( c.$table.css( 'margin-top' ), 10 );
+
+		wo.resizable_.storedSizes = storedSizes = ( ( ts.storage && wo.resizable !== false ) ?
+			ts.storage( c.table, ts.css.resizableStorage ) :
+			[] ) || [];
+		ts.resizable.setWidths( c, wo, storedSizes );
+
+		wo.$resizable_container = $( '<div class="' + ts.css.resizableContainer + '">' )
+			.css({ top : marginTop })
+			.insertBefore( c.$table );
+		// add container
+		for ( column = 0; column < c.columns; column++ ) {
+			$header = c.$headerIndexed[ column ];
+			noResize = ts.getData( $header, ts.getColumnData( c.table, c.headers, column ), 'resizable' ) === 'false';
+			if ( !noResize ) {
+				$( '<div class="' + ts.css.resizableHandle + '">' )
+					.appendTo( wo.$resizable_container )
+					.attr({
+						'data-column' : column,
+						'unselectable' : 'on'
+					})
+					.data( 'header', $header )
+					.bind( 'selectstart', false );
+			}
+		}
+		c.$table.one('tablesorter-initialized', function() {
+			ts.resizable.setHandlePosition( c, wo );
+			ts.resizable.bindings( this.config, this.config.widgetOptions );
+		});
+	},
+
+	setWidth : function( $el, width ) {
+		$el.css({
+			'width' : width,
+			'min-width' : '',
+			'max-width' : ''
+		});
+	},
+
+	setWidths : function( c, wo, storedSizes ) {
+		var column,
+			$extra = $( c.namespace + '_extra_headers' ),
+			$col = c.$table.children( 'colgroup' ).children( 'col' );
+		storedSizes = storedSizes || wo.resizable_.storedSizes || [];
+		// process only if table ID or url match
+		if ( storedSizes.length ) {
+			for ( column = 0; column < c.columns; column++ ) {
+				// set saved resizable widths
+				c.$headers.eq( column ).width( storedSizes[ column ] );
+				if ( $extra.length ) {
+					// stickyHeaders needs to modify min & max width as well
+					ts.resizable.setWidth( $extra.eq( column ).add( $col.eq( column ) ), storedSizes[ column ] );
+				}
+			}
+			if ( $( c.namespace + '_extra_table' ).length && !ts.hasWidget( c.table, 'scroller' ) ) {
+				ts.resizable.setWidth( $( c.namespace + '_extra_table' ), c.$table.outerWidth() );
+			}
+		}
+	},
+
+	setHandlePosition : function( c, wo ) {
+		var tableWidth = c.$table.outerWidth(),
+			hasScroller = ts.hasWidget( c.table, 'scroller' ),
+			tableHeight = c.$table.height(),
+			$handles = wo.$resizable_container.children(),
+			handleCenter = Math.floor( $handles.width() / 2 - parseFloat( c.$headers.css( 'border-right-width' ) ) * 2 );
+
+		if ( hasScroller ) {
+			tableHeight = 0;
+			c.$table.closest( '.' + ts.css.scrollerWrap ).children().each(function(){
+				var $this = $(this);
+				// center table has a max-height set
+				tableHeight += $this.filter('[style*="height"]').length ? $this.height() : $this.children('table').height();
+			});
+		}
+		$handles.each( function() {
+			var $this = $(this),
+				column = parseInt( $this.attr( 'data-column' ), 10 ),
+				columns = c.columns - 1,
+				$header = $this.data( 'header' );
+			if ( column < columns || column === columns && wo.resizable_addLastColumn ) {
+				$this.css({
+					height : tableHeight,
+					left : $header.position().left + $header.width() - handleCenter
+				});
+			}
+		});
+	},
+
+	// prevent text selection while dragging resize bar
+	toggleTextSelection : function( c, toggle ) {
+		var namespace = c.namespace + 'tsresize';
+		c.widgetOptions.resizable_.disabled = toggle;
+		$( 'body' ).toggleClass( ts.css.resizableNoSelect, toggle );
+		if ( toggle ) {
+			$( 'body' )
+				.attr( 'unselectable', 'on' )
+				.bind( 'selectstart' + namespace, false );
+		} else {
+			$( 'body' )
+				.removeAttr( 'unselectable' )
+				.unbind( 'selectstart' + namespace );
+		}
+	},
+
+	bindings : function( c, wo ) {
+		var namespace = c.namespace + 'tsresize';
+		wo.$resizable_container.children().bind( 'mousedown', function( event ) {
+			// save header cell and mouse position
+			var column,
+				vars = wo.resizable_,
+				$extras = $( c.namespace + '_extra_headers' ),
+				$header = $( event.target ).data( 'header' );
+
+			column = parseInt( $header.attr( 'data-column' ), 10 );
+			vars.$target = $header = $header.add( $extras.filter('[data-column="' + column + '"]') );
+			vars.target = column;
+
+			// if table is not as wide as it's parent, then resize the table
+			vars.$next = event.shiftKey || wo.resizable_targetLast ?
+				$header.parent().children().not( '.resizable-false' ).filter( ':last' ) :
+				$header.nextAll( ':not(.resizable-false)' ).eq( 0 );
+
+			column = parseInt( vars.$next.attr( 'data-column' ), 10 );
+			vars.$next = vars.$next.add( $extras.filter('[data-column="' + column + '"]') );
+			vars.next = column;
+
+			vars.mouseXPosition = event.pageX;
+			vars.storedSizes = c.$headers.map(function(){ return $(this).width(); }).get();
+			ts.resizable.toggleTextSelection( c, true );
+		});
+
+		$( document )
+			.bind( 'mousemove' + namespace, function( event ) {
+				var vars = wo.resizable_;
+				// ignore mousemove if no mousedown
+				if ( !vars.disabled || vars.mouseXPosition === 0 || !vars.$target ) { return; }
+				if ( wo.resizable_throttle ) {
+					clearTimeout( vars.timer );
+					vars.timer = setTimeout( function() {
+						ts.resizable.mouseMove( c, wo, event );
+					}, isNaN( wo.resizable_throttle ) ? 5 : wo.resizable_throttle );
+				} else {
+					ts.resizable.mouseMove( c, wo, event );
+				}
+			})
+			.bind( 'mouseup' + namespace, function() {
+				if (!wo.resizable_.disabled) { return; }
+				ts.resizable.toggleTextSelection( c, false );
+				ts.resizable.stopResize( c, wo );
+				ts.resizable.setHandlePosition( c, wo );
+			});
+
+		// resizeEnd event triggered by scroller widget
+		$( window ).bind( 'resize' + namespace + ' resizeEnd' + namespace, function() {
+			ts.resizable.setHandlePosition( c, wo );
+		});
+
+		// right click to reset columns to default widths
+		c.$table.find( 'thead:first' ).add( $( c.namespace + '_extra_table' ).find( 'thead:first' ) )
+		.bind( 'contextmenu' + namespace, function() {
+			// $.isEmptyObject() needs jQuery 1.4+; allow right click if already reset
+			var allowClick = wo.resizable_.storedSizes.length === 0;
+			ts.resizableReset( c.table );
+			ts.resizable.setHandlePosition( c, wo );
+			wo.resizable_.storedSizes = [];
+			return allowClick;
+		});
+
+	},
+
+	mouseMove : function( c, wo, event ) {
+		if ( wo.resizable_.mouseXPosition === 0 || !wo.resizable_.$target ) { return; }
+		// resize columns
+		var vars = wo.resizable_,
+			$target = vars.$target,
+			$next = vars.$next,
+			leftEdge = event.pageX - vars.mouseXPosition,
+			targetWidth = $target.width();
+		if ( vars.fullWidth ) {
+			vars.storedSizes[ vars.target ] += leftEdge;
+			vars.storedSizes[ vars.next ] -= leftEdge;
+			ts.resizable.setWidths( c, wo );
+
+		} else if ( vars.overflow ) {
+			c.$table.add( $( c.namespace + '_extra_table' ) ).width(function(i, w){
+				return w + leftEdge;
+			});
+			if ( !$next.length ) {
+				// if expanding right-most column, scroll the wrapper
+				vars.$wrap[0].scrollLeft = c.$table.width();
+			}
+		} else {
+			vars.storedSizes[ vars.target ] += leftEdge;
+			ts.resizable.setWidths( c, wo );
+		}
+		vars.mouseXPosition = event.pageX;
+	},
+
+	stopResize : function( c, wo ) {
+		var vars = wo.resizable_;
+		vars.storedSizes = [];
+		if ( ts.storage ) {
+			vars.storedSizes = c.$headers.map(function(){ return $(this).width(); }).get();
+			if ( wo.resizable !== false ) {
+				// save all column widths
+				ts.storage( c.table, ts.css.resizableStorage, vars.storedSizes );
+			}
+		}
+		vars.mouseXPosition = 0;
+		vars.$target = vars.$next = null;
+		$(window).trigger('resize'); // will update stickyHeaders, just in case
+	}
+};
+
 // this widget saves the column widths if
 // $.tablesorter.storage function is included
 // **************************
@@ -1972,163 +2221,52 @@ ts.addWidget({
 		resizable : true,
 		resizable_addLastColumn : false,
 		resizable_widths : [],
-		resizable_throttle : false // set to true (5ms) or any number 0-10 range
+		resizable_throttle : false, // set to true (5ms) or any number 0-10 range
+		resizable_targetLast : false
 	},
-	format: function(table, c, wo) {
+	init: function(table, thisWidget, c, wo) {
-		if (c.$table.hasClass('hasResizable')) { return; }
+		ts.resizable.init( c, wo );
-		c.$table.addClass('hasResizable');
-		ts.resizableReset(table, true); // set default widths
-		var $rows, $columns, $column, column, timer,
-			storedSizes = {},
-			$table = c.$table,
-			$wrap = $table.parent(),
-			overflow = $table.parent().css('overflow') === 'auto',
-			mouseXPosition = 0,
-			$target = null,
-			$next = null,
-			fullWidth = Math.abs($table.parent().width() - $table.width()) < 20,
-			mouseMove = function(event){
-				if (mouseXPosition === 0 || !$target) { return; }
-				// resize columns
-				var leftEdge = event.pageX - mouseXPosition,
-					targetWidth = $target.width();
-				$target.width( targetWidth + leftEdge );
-				if ($target.width() !== targetWidth && fullWidth) {
-					$next.width( $next.width() - leftEdge );
-				} else if (overflow) {
-					$table.width(function(i, w){
-						return w + leftEdge;
-					});
-					if (!$next.length) {
-						// if expanding right-most column, scroll the wrapper
-						$wrap[0].scrollLeft = $table.width();
-					}
-				}
-				mouseXPosition = event.pageX;
 	},
-			stopResize = function() {
+	remove: function( table, c, wo ) {
-				if (ts.storage && $target && $next) {
+		if (wo.$resizable_container) {
-					storedSizes = {};
+			var namespace = c.namespace + 'tsresize';
-					storedSizes[$target.index()] = $target.width();
+			c.$table.add( $( c.namespace + '_extra_table' ) )
-					storedSizes[$next.index()] = $next.width();
-					$target.width( storedSizes[$target.index()] );
-					$next.width( storedSizes[$next.index()] );
-					if (wo.resizable !== false) {
-						// save all column widths
-						ts.storage(table, 'tablesorter-resizable', c.$headers.map(function(){ return $(this).width(); }).get() );
-					}
-				}
-				mouseXPosition = 0;
-				$target = $next = null;
-				$(window).trigger('resize'); // will update stickyHeaders, just in case
-			};
-		storedSizes = (ts.storage && wo.resizable !== false) ? ts.storage(table, 'tablesorter-resizable') : {};
-		// process only if table ID or url match
-		if (storedSizes) {
-			for (column in storedSizes) {
-				if (!isNaN(column) && column < c.$headers.length) {
-					c.$headers.eq(column).width(storedSizes[column]); // set saved resizable widths
-				}
-			}
-		}
-		$rows = $table.children('thead:first').children('tr');
-		// add resizable-false class name to headers (across rows as needed)
-		$rows.children().each(function() {
-			var canResize,
-				$column = $(this);
-			column = $column.attr('data-column');
-			canResize = ts.getData( $column, ts.getColumnData( table, c.headers, column ), 'resizable') === "false";
-			$rows.children().filter('[data-column="' + column + '"]')[canResize ? 'addClass' : 'removeClass']('resizable-false');
-		});
-		// add wrapper inside each cell to allow for positioning of the resizable target block
-		$rows.each(function() {
-			$column = $(this).children().not('.resizable-false');
-			if (!$(this).find('.' + ts.css.wrapper).length) {
-				// Firefox needs this inner div to position the resizer correctly
-				$column.wrapInner('<div class="' + ts.css.wrapper + '" style="position:relative;height:100%;width:100%"></div>');
-			}
-			// don't include the last column of the row
-			if (!wo.resizable_addLastColumn) { $column = $column.slice(0,-1); }
-			$columns = $columns ? $columns.add($column) : $column;
-		});
-		$columns
-		.each(function() {
-			var $column = $(this),
-				padding = parseInt($column.css('padding-right'), 10) + 10; // 10 is 1/2 of the 20px wide resizer
-			$column
-				.find('.' + ts.css.wrapper)
-				.append('<div class="' + ts.css.resizer + '" style="cursor:w-resize;position:absolute;z-index:1;right:-' +
-					padding + 'px;top:0;height:100%;width:20px;"></div>');
-		})
-		.find('.' + ts.css.resizer)
-		.bind('mousedown', function(event) {
-			// save header cell and mouse position
-			$target = $(event.target).closest('th');
-			var $header = c.$headers.filter('[data-column="' + $target.attr('data-column') + '"]');
-			if ($header.length > 1) { $target = $target.add($header); }
-			// if table is not as wide as it's parent, then resize the table
-			$next = event.shiftKey ? $target.parent().find('th').not('.resizable-false').filter(':last') : $target.nextAll(':not(.resizable-false)').eq(0);
-			mouseXPosition = event.pageX;
-		});
-		$(document)
-		.bind('mousemove.tsresize', function(event) {
-			// ignore mousemove if no mousedown
-			if (mouseXPosition === 0 || !$target) { return; }
-			if (wo.resizable_throttle) {
-				clearTimeout(timer);
-				timer = setTimeout(function(){
-					mouseMove(event);
-				}, isNaN(wo.resizable_throttle) ? 5 : wo.resizable_throttle );
-			} else {
-				mouseMove(event);
-			}
-		})
-		.bind('mouseup.tsresize', function() {
-			stopResize();
-		});
-
-		// right click to reset columns to default widths
-		$table.find('thead:first').bind('contextmenu.tsresize', function() {
-			ts.resizableReset(table);
-			// $.isEmptyObject() needs jQuery 1.4+; allow right click if already reset
-			var allowClick = $.isEmptyObject ? $.isEmptyObject(storedSizes) : true;
-			storedSizes = {};
-			return allowClick;
-		});
-	},
-	remove: function(table, c) {
-		c.$table
 				.removeClass('hasResizable')
-			.children('thead')
+				.children( 'thead' ).unbind( 'contextmenu' + namespace );
-			.unbind('mouseup.tsresize mouseleave.tsresize contextmenu.tsresize')
+
-			.children('tr').children()
+				wo.$resizable_container.remove();
-			.unbind('mousemove.tsresize mouseup.tsresize')
+			ts.resizable.toggleTextSelection( c, false );
-			// don't remove "tablesorter-wrapper" as uitheme uses it too
+			ts.resizableReset( table );
-			.find('.' + ts.css.resizer).remove();
+			$( document ).unbind( 'mousemove' + namespace + ' mouseup' + namespace );
-		ts.resizableReset(table);
+		}
 	}
 });
-ts.resizableReset = function(table, nosave) {
+
-	$(table).each(function(){
+ts.resizableReset = function( table, nosave ) {
+	$( table ).each(function(){
 		var $t,
 			c = this.config,
 			wo = c && c.widgetOptions;
-		if (table && c) {
+		if ( table && c ) {
-			c.$headers.each(function(i){
+			c.$headers.each( function( i ) {
 				$t = $(this);
-				if (wo.resizable_widths && wo.resizable_widths[i]) {
+				if ( wo.resizable_widths && wo.resizable_widths[ i ] ) {
-					$t.css('width', wo.resizable_widths[i]);
+					$t.css( 'width', wo.resizable_widths[ i ] );
-				} else if (!$t.hasClass('resizable-false')) {
+				} else if ( !$t.hasClass( 'resizable-false' ) ) {
 					// don't clear the width of any column that is not resizable
-					$t.css('width','');
+					$t.css( 'width', '' );
 				}
 			});
-			if (ts.storage && !nosave) { ts.storage(this, 'tablesorter-resizable', {}); }
+			// reset stickyHeader widths
+			$( window ).trigger( 'resize' );
+			if ( ts.storage && !nosave ) {
+				ts.storage( this, ts.css.resizableStorage, {} );
+			}
 		}
 	});
 };
 
-})(jQuery, window);
+})( jQuery, window );
 
 /*! Widget: saveSort */
 ;(function ($) {

js/widgets/widget-resizable.js

@@ -1,12 +1,261 @@
-/*! Widget: resizable */
+/*! Widget: resizable - updated 3/25/2015 (v2.21.3) */
 ;(function ($, window) {
 'use strict';
 var ts = $.tablesorter = $.tablesorter || {};
 
 $.extend(ts.css, {
-	resizer : 'tablesorter-resizer' // resizable
+	resizableContainer : 'tablesorter-resizable-container',
+	resizableHandle    : 'tablesorter-resizable-handle',
+	resizableNoSelect  : 'tablesorter-disableSelection',
+	resizableStorage   : 'tablesorter-resizable'
 });
 
+// Add extra scroller css
+$(function(){
+	var s = '<style>' +
+		'body.' + ts.css.resizableNoSelect + ' { -ms-user-select: none; -moz-user-select: -moz-none;' +
+			'-khtml-user-select: none; -webkit-user-select: none; user-select: none; }' +
+		'.' + ts.css.resizableContainer + ' { position: relative; height: 1px; }' +
+		// make handle z-index > than stickyHeader z-index, so the handle stays above sticky header
+		'.' + ts.css.resizableHandle + ' { position: absolute; display: inline-block; width: 8px; top: 1px;' +
+			'cursor: ew-resize; z-index: 3; user-select: none; -moz-user-select: none; }' +
+		'</style>';
+	$(s).appendTo('body');
+});
+
+ts.resizable = {
+	init : function( c, wo ) {
+		if ( c.$table.hasClass( 'hasResizable' ) ) { return; }
+		c.$table.addClass( 'hasResizable' );
+		ts.resizableReset( c.table, true ); // set default widths
+
+		// internal variables
+		wo.resizable_ = {
+			$wrap : c.$table.parent(),
+			mouseXPosition : 0,
+			$target : null,
+			$next : null,
+			overflow : c.$table.parent().css('overflow') === 'auto',
+			fullWidth : Math.abs(c.$table.parent().width() - c.$table.width()) < 20,
+			storedSizes : []
+		};
+
+		var noResize, $header, column, storedSizes,
+			marginTop = parseInt( c.$table.css( 'margin-top' ), 10 );
+
+		wo.resizable_.storedSizes = storedSizes = ( ( ts.storage && wo.resizable !== false ) ?
+			ts.storage( c.table, ts.css.resizableStorage ) :
+			[] ) || [];
+		ts.resizable.setWidths( c, wo, storedSizes );
+
+		wo.$resizable_container = $( '<div class="' + ts.css.resizableContainer + '">' )
+			.css({ top : marginTop })
+			.insertBefore( c.$table );
+		// add container
+		for ( column = 0; column < c.columns; column++ ) {
+			$header = c.$headerIndexed[ column ];
+			noResize = ts.getData( $header, ts.getColumnData( c.table, c.headers, column ), 'resizable' ) === 'false';
+			if ( !noResize ) {
+				$( '<div class="' + ts.css.resizableHandle + '">' )
+					.appendTo( wo.$resizable_container )
+					.attr({
+						'data-column' : column,
+						'unselectable' : 'on'
+					})
+					.data( 'header', $header )
+					.bind( 'selectstart', false );
+			}
+		}
+		c.$table.one('tablesorter-initialized', function() {
+			ts.resizable.setHandlePosition( c, wo );
+			ts.resizable.bindings( this.config, this.config.widgetOptions );
+		});
+	},
+
+	setWidth : function( $el, width ) {
+		$el.css({
+			'width' : width,
+			'min-width' : '',
+			'max-width' : ''
+		});
+	},
+
+	setWidths : function( c, wo, storedSizes ) {
+		var column,
+			$extra = $( c.namespace + '_extra_headers' ),
+			$col = c.$table.children( 'colgroup' ).children( 'col' );
+		storedSizes = storedSizes || wo.resizable_.storedSizes || [];
+		// process only if table ID or url match
+		if ( storedSizes.length ) {
+			for ( column = 0; column < c.columns; column++ ) {
+				// set saved resizable widths
+				c.$headers.eq( column ).width( storedSizes[ column ] );
+				if ( $extra.length ) {
+					// stickyHeaders needs to modify min & max width as well
+					ts.resizable.setWidth( $extra.eq( column ).add( $col.eq( column ) ), storedSizes[ column ] );
+				}
+			}
+			if ( $( c.namespace + '_extra_table' ).length && !ts.hasWidget( c.table, 'scroller' ) ) {
+				ts.resizable.setWidth( $( c.namespace + '_extra_table' ), c.$table.outerWidth() );
+			}
+		}
+	},
+
+	setHandlePosition : function( c, wo ) {
+		var tableWidth = c.$table.outerWidth(),
+			hasScroller = ts.hasWidget( c.table, 'scroller' ),
+			tableHeight = c.$table.height(),
+			$handles = wo.$resizable_container.children(),
+			handleCenter = Math.floor( $handles.width() / 2 - parseFloat( c.$headers.css( 'border-right-width' ) ) * 2 );
+
+		if ( hasScroller ) {
+			tableHeight = 0;
+			c.$table.closest( '.' + ts.css.scrollerWrap ).children().each(function(){
+				var $this = $(this);
+				// center table has a max-height set
+				tableHeight += $this.filter('[style*="height"]').length ? $this.height() : $this.children('table').height();
+			});
+		}
+		$handles.each( function() {
+			var $this = $(this),
+				column = parseInt( $this.attr( 'data-column' ), 10 ),
+				columns = c.columns - 1,
+				$header = $this.data( 'header' );
+			if ( column < columns || column === columns && wo.resizable_addLastColumn ) {
+				$this.css({
+					height : tableHeight,
+					left : $header.position().left + $header.width() - handleCenter
+				});
+			}
+		});
+	},
+
+	// prevent text selection while dragging resize bar
+	toggleTextSelection : function( c, toggle ) {
+		var namespace = c.namespace + 'tsresize';
+		c.widgetOptions.resizable_.disabled = toggle;
+		$( 'body' ).toggleClass( ts.css.resizableNoSelect, toggle );
+		if ( toggle ) {
+			$( 'body' )
+				.attr( 'unselectable', 'on' )
+				.bind( 'selectstart' + namespace, false );
+		} else {
+			$( 'body' )
+				.removeAttr( 'unselectable' )
+				.unbind( 'selectstart' + namespace );
+		}
+	},
+
+	bindings : function( c, wo ) {
+		var namespace = c.namespace + 'tsresize';
+		wo.$resizable_container.children().bind( 'mousedown', function( event ) {
+			// save header cell and mouse position
+			var column,
+				vars = wo.resizable_,
+				$extras = $( c.namespace + '_extra_headers' ),
+				$header = $( event.target ).data( 'header' );
+
+			column = parseInt( $header.attr( 'data-column' ), 10 );
+			vars.$target = $header = $header.add( $extras.filter('[data-column="' + column + '"]') );
+			vars.target = column;
+
+			// if table is not as wide as it's parent, then resize the table
+			vars.$next = event.shiftKey || wo.resizable_targetLast ?
+				$header.parent().children().not( '.resizable-false' ).filter( ':last' ) :
+				$header.nextAll( ':not(.resizable-false)' ).eq( 0 );
+
+			column = parseInt( vars.$next.attr( 'data-column' ), 10 );
+			vars.$next = vars.$next.add( $extras.filter('[data-column="' + column + '"]') );
+			vars.next = column;
+
+			vars.mouseXPosition = event.pageX;
+			vars.storedSizes = c.$headers.map(function(){ return $(this).width(); }).get();
+			ts.resizable.toggleTextSelection( c, true );
+		});
+
+		$( document )
+			.bind( 'mousemove' + namespace, function( event ) {
+				var vars = wo.resizable_;
+				// ignore mousemove if no mousedown
+				if ( !vars.disabled || vars.mouseXPosition === 0 || !vars.$target ) { return; }
+				if ( wo.resizable_throttle ) {
+					clearTimeout( vars.timer );
+					vars.timer = setTimeout( function() {
+						ts.resizable.mouseMove( c, wo, event );
+					}, isNaN( wo.resizable_throttle ) ? 5 : wo.resizable_throttle );
+				} else {
+					ts.resizable.mouseMove( c, wo, event );
+				}
+			})
+			.bind( 'mouseup' + namespace, function() {
+				if (!wo.resizable_.disabled) { return; }
+				ts.resizable.toggleTextSelection( c, false );
+				ts.resizable.stopResize( c, wo );
+				ts.resizable.setHandlePosition( c, wo );
+			});
+
+		// resizeEnd event triggered by scroller widget
+		$( window ).bind( 'resize' + namespace + ' resizeEnd' + namespace, function() {
+			ts.resizable.setHandlePosition( c, wo );
+		});
+
+		// right click to reset columns to default widths
+		c.$table.find( 'thead:first' ).add( $( c.namespace + '_extra_table' ).find( 'thead:first' ) )
+		.bind( 'contextmenu' + namespace, function() {
+			// $.isEmptyObject() needs jQuery 1.4+; allow right click if already reset
+			var allowClick = wo.resizable_.storedSizes.length === 0;
+			ts.resizableReset( c.table );
+			ts.resizable.setHandlePosition( c, wo );
+			wo.resizable_.storedSizes = [];
+			return allowClick;
+		});
+
+	},
+
+	mouseMove : function( c, wo, event ) {
+		if ( wo.resizable_.mouseXPosition === 0 || !wo.resizable_.$target ) { return; }
+		// resize columns
+		var vars = wo.resizable_,
+			$target = vars.$target,
+			$next = vars.$next,
+			leftEdge = event.pageX - vars.mouseXPosition,
+			targetWidth = $target.width();
+		if ( vars.fullWidth ) {
+			vars.storedSizes[ vars.target ] += leftEdge;
+			vars.storedSizes[ vars.next ] -= leftEdge;
+			ts.resizable.setWidths( c, wo );
+
+		} else if ( vars.overflow ) {
+			c.$table.add( $( c.namespace + '_extra_table' ) ).width(function(i, w){
+				return w + leftEdge;
+			});
+			if ( !$next.length ) {
+				// if expanding right-most column, scroll the wrapper
+				vars.$wrap[0].scrollLeft = c.$table.width();
+			}
+		} else {
+			vars.storedSizes[ vars.target ] += leftEdge;
+			ts.resizable.setWidths( c, wo );
+		}
+		vars.mouseXPosition = event.pageX;
+	},
+
+	stopResize : function( c, wo ) {
+		var vars = wo.resizable_;
+		vars.storedSizes = [];
+		if ( ts.storage ) {
+			vars.storedSizes = c.$headers.map(function(){ return $(this).width(); }).get();
+			if ( wo.resizable !== false ) {
+				// save all column widths
+				ts.storage( c.table, ts.css.resizableStorage, vars.storedSizes );
+			}
+		}
+		vars.mouseXPosition = 0;
+		vars.$target = vars.$next = null;
+		$(window).trigger('resize'); // will update stickyHeaders, just in case
+	}
+};
+
 // this widget saves the column widths if
 // $.tablesorter.storage function is included
 // **************************
@@ -17,160 +266,49 @@ ts.addWidget({
 		resizable : true,
 		resizable_addLastColumn : false,
 		resizable_widths : [],
-		resizable_throttle : false // set to true (5ms) or any number 0-10 range
+		resizable_throttle : false, // set to true (5ms) or any number 0-10 range
+		resizable_targetLast : false
 	},
-	format: function(table, c, wo) {
+	init: function(table, thisWidget, c, wo) {
-		if (c.$table.hasClass('hasResizable')) { return; }
+		ts.resizable.init( c, wo );
-		c.$table.addClass('hasResizable');
-		ts.resizableReset(table, true); // set default widths
-		var $rows, $columns, $column, column, timer,
-			storedSizes = {},
-			$table = c.$table,
-			$wrap = $table.parent(),
-			overflow = $table.parent().css('overflow') === 'auto',
-			mouseXPosition = 0,
-			$target = null,
-			$next = null,
-			fullWidth = Math.abs($table.parent().width() - $table.width()) < 20,
-			mouseMove = function(event){
-				if (mouseXPosition === 0 || !$target) { return; }
-				// resize columns
-				var leftEdge = event.pageX - mouseXPosition,
-					targetWidth = $target.width();
-				$target.width( targetWidth + leftEdge );
-				if ($target.width() !== targetWidth && fullWidth) {
-					$next.width( $next.width() - leftEdge );
-				} else if (overflow) {
-					$table.width(function(i, w){
-						return w + leftEdge;
-					});
-					if (!$next.length) {
-						// if expanding right-most column, scroll the wrapper
-						$wrap[0].scrollLeft = $table.width();
-					}
-				}
-				mouseXPosition = event.pageX;
 	},
-			stopResize = function() {
+	remove: function( table, c, wo ) {
-				if (ts.storage && $target && $next) {
+		if (wo.$resizable_container) {
-					storedSizes = {};
+			var namespace = c.namespace + 'tsresize';
-					storedSizes[$target.index()] = $target.width();
+			c.$table.add( $( c.namespace + '_extra_table' ) )
-					storedSizes[$next.index()] = $next.width();
-					$target.width( storedSizes[$target.index()] );
-					$next.width( storedSizes[$next.index()] );
-					if (wo.resizable !== false) {
-						// save all column widths
-						ts.storage(table, 'tablesorter-resizable', c.$headers.map(function(){ return $(this).width(); }).get() );
-					}
-				}
-				mouseXPosition = 0;
-				$target = $next = null;
-				$(window).trigger('resize'); // will update stickyHeaders, just in case
-			};
-		storedSizes = (ts.storage && wo.resizable !== false) ? ts.storage(table, 'tablesorter-resizable') : {};
-		// process only if table ID or url match
-		if (storedSizes) {
-			for (column in storedSizes) {
-				if (!isNaN(column) && column < c.$headers.length) {
-					c.$headers.eq(column).width(storedSizes[column]); // set saved resizable widths
-				}
-			}
-		}
-		$rows = $table.children('thead:first').children('tr');
-		// add resizable-false class name to headers (across rows as needed)
-		$rows.children().each(function() {
-			var canResize,
-				$column = $(this);
-			column = $column.attr('data-column');
-			canResize = ts.getData( $column, ts.getColumnData( table, c.headers, column ), 'resizable') === "false";
-			$rows.children().filter('[data-column="' + column + '"]')[canResize ? 'addClass' : 'removeClass']('resizable-false');
-		});
-		// add wrapper inside each cell to allow for positioning of the resizable target block
-		$rows.each(function() {
-			$column = $(this).children().not('.resizable-false');
-			if (!$(this).find('.' + ts.css.wrapper).length) {
-				// Firefox needs this inner div to position the resizer correctly
-				$column.wrapInner('<div class="' + ts.css.wrapper + '" style="position:relative;height:100%;width:100%"></div>');
-			}
-			// don't include the last column of the row
-			if (!wo.resizable_addLastColumn) { $column = $column.slice(0,-1); }
-			$columns = $columns ? $columns.add($column) : $column;
-		});
-		$columns
-		.each(function() {
-			var $column = $(this),
-				padding = parseInt($column.css('padding-right'), 10) + 10; // 10 is 1/2 of the 20px wide resizer
-			$column
-				.find('.' + ts.css.wrapper)
-				.append('<div class="' + ts.css.resizer + '" style="cursor:w-resize;position:absolute;z-index:1;right:-' +
-					padding + 'px;top:0;height:100%;width:20px;"></div>');
-		})
-		.find('.' + ts.css.resizer)
-		.bind('mousedown', function(event) {
-			// save header cell and mouse position
-			$target = $(event.target).closest('th');
-			var $header = c.$headers.filter('[data-column="' + $target.attr('data-column') + '"]');
-			if ($header.length > 1) { $target = $target.add($header); }
-			// if table is not as wide as it's parent, then resize the table
-			$next = event.shiftKey ? $target.parent().find('th').not('.resizable-false').filter(':last') : $target.nextAll(':not(.resizable-false)').eq(0);
-			mouseXPosition = event.pageX;
-		});
-		$(document)
-		.bind('mousemove.tsresize', function(event) {
-			// ignore mousemove if no mousedown
-			if (mouseXPosition === 0 || !$target) { return; }
-			if (wo.resizable_throttle) {
-				clearTimeout(timer);
-				timer = setTimeout(function(){
-					mouseMove(event);
-				}, isNaN(wo.resizable_throttle) ? 5 : wo.resizable_throttle );
-			} else {
-				mouseMove(event);
-			}
-		})
-		.bind('mouseup.tsresize', function() {
-			stopResize();
-		});
-
-		// right click to reset columns to default widths
-		$table.find('thead:first').bind('contextmenu.tsresize', function() {
-			ts.resizableReset(table);
-			// $.isEmptyObject() needs jQuery 1.4+; allow right click if already reset
-			var allowClick = $.isEmptyObject ? $.isEmptyObject(storedSizes) : true;
-			storedSizes = {};
-			return allowClick;
-		});
-	},
-	remove: function(table, c) {
-		c.$table
 				.removeClass('hasResizable')
-			.children('thead')
+				.children( 'thead' ).unbind( 'contextmenu' + namespace );
-			.unbind('mouseup.tsresize mouseleave.tsresize contextmenu.tsresize')
+
-			.children('tr').children()
+				wo.$resizable_container.remove();
-			.unbind('mousemove.tsresize mouseup.tsresize')
+			ts.resizable.toggleTextSelection( c, false );
-			// don't remove "tablesorter-wrapper" as uitheme uses it too
+			ts.resizableReset( table );
-			.find('.' + ts.css.resizer).remove();
+			$( document ).unbind( 'mousemove' + namespace + ' mouseup' + namespace );
-		ts.resizableReset(table);
+		}
 	}
 });
-ts.resizableReset = function(table, nosave) {
+
-	$(table).each(function(){
+ts.resizableReset = function( table, nosave ) {
+	$( table ).each(function(){
 		var $t,
 			c = this.config,
 			wo = c && c.widgetOptions;
-		if (table && c) {
+		if ( table && c ) {
-			c.$headers.each(function(i){
+			c.$headers.each( function( i ) {
 				$t = $(this);
-				if (wo.resizable_widths && wo.resizable_widths[i]) {
+				if ( wo.resizable_widths && wo.resizable_widths[ i ] ) {
-					$t.css('width', wo.resizable_widths[i]);
+					$t.css( 'width', wo.resizable_widths[ i ] );
-				} else if (!$t.hasClass('resizable-false')) {
+				} else if ( !$t.hasClass( 'resizable-false' ) ) {
 					// don't clear the width of any column that is not resizable
-					$t.css('width','');
+					$t.css( 'width', '' );
 				}
 			});
-			if (ts.storage && !nosave) { ts.storage(this, 'tablesorter-resizable', {}); }
+			// reset stickyHeader widths
+			$( window ).trigger( 'resize' );
+			if ( ts.storage && !nosave ) {
+				ts.storage( this, ts.css.resizableStorage, {} );
+			}
 		}
 	});
 };
 
-})(jQuery, window);
+})( jQuery, window );