Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added flexability, handles colspans, window.resize event #7

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added flexability, handles colspans, window.resize event #7

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
167 changes: 115 additions & 52 deletions jquery.tablescroll.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,52 +29,20 @@ OTHER DEALINGS IN THE SOFTWARE.
*/

;(function($){

var scrollbarWidth = 0;

// http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php
function getScrollbarWidth()
{
if (scrollbarWidth) return scrollbarWidth;
var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div></div>');
$('body').append(div);
var w1 = $('div', div).innerWidth();
div.css('overflow-y', 'auto');
var w2 = $('div', div).innerWidth();
$(div).remove();
scrollbarWidth = (w1 - w2);
return scrollbarWidth;
}

$.fn.tableScroll = function(options)
{
if (options == 'undo')
{
var container = $(this).parent().parent();
if (container.hasClass('tablescroll_wrapper'))
{
container.find('.tablescroll_head thead').prependTo(this);
container.find('.tablescroll_foot tfoot').appendTo(this);
container.before(this);
container.empty();
}
return;
}
var Me = this;
var timeoutHandle;

this.scrollbarWidth = 0;

var settings = $.extend({},$.fn.tableScroll.defaults,options);

// Bail out if there's no vertical overflow
//if ($(this).height() <= settings.height)
//{
// return this;
//}

settings.scrollbarWidth = getScrollbarWidth();

this.each(function()
this.FormatTable = function()
{
var flush = settings.flush;

var originalClass = $(this).attr("class");

var tb = $(this).addClass('tablescroll_body');

var wrapper = $('<div class="tablescroll_wrapper"></div>').insertBefore(tb).append(tb);
Expand All @@ -101,7 +69,7 @@ OTHER DEALINGS IN THE SOFTWARE.
var diff = wrapper_width-width;

// assume table will scroll
wrapper.css({width:((width-diff)+settings.scrollbarWidth)+'px'});
wrapper.css({width:((width-diff)+Me.scrollbarWidth)+'px'});
tb.css('width',(width-diff)+'px');

if (tb.outerHeight() <= settings.height)
Expand All @@ -121,26 +89,62 @@ OTHER DEALINGS IN THE SOFTWARE.
var tbody_tr_first = $('tbody tr:first',tb);
var tfoot_tr_first = $('tfoot tr:first',tb);

// remember width of last cell
var w = 0;

// Record cell widths
// Shoud colspan > 1, evenly distribute width among grouped cells
var aWidths = [];
$('th, td',thead_tr_first).each(function(i)
{
w = $(this).width();
var jCell = $(this);
var colspan = jCell.attr('colspan') || 1;
var colspanIterator = colspan;
var avgWidth = jCell.width()/colspan;
while (colspanIterator) {
aWidths.push(avgWidth);
colspanIterator--;
}

$('th:eq('+i+'), td:eq('+i+')',thead_tr_first).css('width',w+'px');
$('th:eq('+i+'), td:eq('+i+')',tbody_tr_first).css('width',w+'px');
if (has_tfoot) $('th:eq('+i+'), td:eq('+i+')',tfoot_tr_first).css('width',w+'px');
});

// Explicitly set width of header cells
function SetCellWidths(_selector, _base, _aCellWidths) {
var cellIdx = 0;
var w = 0;
$(_selector, _base).each(function(i) {
var jCell = $(this);
var colspan = jCell.attr('colspan') || 1;
var w = 0;
while (colspan) {
w += _aCellWidths[cellIdx];
cellIdx++;
colspan--;
}
jCell.width(w);
});
}

SetCellWidths("th, td", thead_tr_first, aWidths);
SetCellWidths("th, td", tbody_tr_first, aWidths);
if (has_tfoot) SetCellWidths("th, td", tfoot_tr_first, aWidths);

if (has_thead)
{
var tbh = $('<table class="tablescroll_head" cellspacing="0"></table>').insertBefore(wrapper).prepend($('thead',tb));
var thead = $('thead',tb);
var tbh = $('<table class="tablescroll_head '+originalClass+'" cellspacing="0"></table>')
.insertBefore(wrapper)
.css({'margin-bottom':'0'})
.prepend(thead.clone());
tb.css({'table-layout':'fixed'});
thead.hide();
}

if (has_tfoot)
{
var tbf = $('<table class="tablescroll_foot" cellspacing="0"></table>').insertAfter(wrapper).prepend($('tfoot',tb));
var tfoot = $('tfoot',tb);
var tbf = $('<table class="tablescroll_foot '+originalClass+'" cellspacing="0"></table>')
.insertAfter(wrapper)
.css({'margin-top':'0'})
.prepend(tfoot.clone());
tfoot.hide();
}

if (tbh != undefined)
Expand All @@ -149,7 +153,10 @@ OTHER DEALINGS IN THE SOFTWARE.

if (flush)
{
$('tr:first th:last, tr:first td:last',tbh).css('width',(w+settings.scrollbarWidth)+'px');
$('tr:first', tbh).append($('<th></th>').css({
'width': Me.scrollbarWidth + 'px'
, 'padding': 0
}));
tbh.css('width',wrapper.outerWidth() + 'px');
}
}
Expand All @@ -160,11 +167,67 @@ OTHER DEALINGS IN THE SOFTWARE.

if (flush)
{
$('tr:first th:last, tr:first td:last',tbf).css('width',(w+settings.scrollbarWidth)+'px');
$('tr:first', tbf).append($('<td></td>').css({
'width': Me.scrollbarWidth + 'px'
, 'padding': 0
}));
tbf.css('width',wrapper.outerWidth() + 'px');
}
}
});
};

this.UndoFormatTable = function() {
var jThis = $(this);
var container = jThis.parents("div.tablescroll");
if (container.length > 0)
{
container.before(this);
container.empty();
jThis.removeAttr("style");
jThis.find("thead, tfoot").show();
}
return;
}

// http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php
this.GetScrollbarWidth = function() {
if (Me.scrollbarWidth) return Me.scrollbarWidth;
var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div></div>');
$('body').append(div);
var w1 = $('div', div).innerWidth();
div.css('overflow-y', 'auto');
var w2 = $('div', div).innerWidth();
$(div).remove();
Me.scrollbarWidth = (w1 - w2);
}

// -----------------------------------------------------------------------------
if (options == 'undo') {
Me.UndoFormatTable();
}

var settings = $.extend({}, $.fn.tableScroll.defaults, options);

// Bail out if there's no vertical overflow
//if ($(this).height() <= settings.height)
//{
// return this;
//}

// Calculate scrollbar width and save for later
Me.GetScrollbarWidth();

// Apply formatting to each table
this.each(Me.FormatTable);

// Setup window.resize event handler
$(window).unbind("resize.tableScroll").bind("resize.tableScroll", function() {
clearTimeout(Me.timeoutHandle);
Me.timeoutHandle = setTimeout(function() {
Me.each(Me.UndoFormatTable);
Me.each(Me.FormatTable);
}, 300);
});

return this;
};
Expand Down