commit 907df8438dc1cb3bd609dc0050e2dccb3c681204 Author: Mark Malek Date: Mon Apr 4 10:28:15 2011 -0400 First commit for this repo diff --git a/README b/README new file mode 100644 index 0000000..e69de29 diff --git a/css/.svn/entries b/css/.svn/entries new file mode 100644 index 0000000..3c80e1d --- /dev/null +++ b/css/.svn/entries @@ -0,0 +1,35 @@ +10 + +dir +0 +https://markmalek.svn.beanstalkapp.com/fixedheadertable/trunk/js/fixedheadertable/css +https://markmalek.svn.beanstalkapp.com/fixedheadertable +add + + + + + + + + + + + + + + + + + + + +63be6c91-0cf1-410f-aa90-cd3733320bd4 + +defaultTheme.css +file + + + +add + diff --git a/css/defaultTheme.css b/css/defaultTheme.css new file mode 100644 index 0000000..f96d4dd --- /dev/null +++ b/css/defaultTheme.css @@ -0,0 +1,141 @@ +/*! +* jquery.fixedHeaderTable. The jQuery fixedHeaderTable plugin +* +* Copyright (c) 2009 Mark Malek +* http://fixedheadertable.mmalek.com +* +* Licensed under MIT +* http://www.opensource.org/licenses/mit-license.php +* +* Launch : October 2009 +* Version : beta 0.1 +* Released: TBA +*/ + +/***********/ +/* CONTENT */ +/***********/ + +.fht_fixed_header table thead tr th, .fht_fixed_header table thead tr th a, .fht_table_body table thead tr th, .fht_table_body table thead tr th a, .fht_table_body table tbody tr td, table thead tr th, table thead tr th a, table tbody tr td, table tbody tr td a { + font-size:14px; + color:#222; + font-weight:normal; + text-decoration:none; + font-family:Helvetica, Arial, "sans-sarif"; +} + +.fht_fixed_header table thead tr th, .fht_fixed_header table thead tr th a, .fht_fixed_header table thead tr th a:hover, .fht_table_body table thead tr th, .fht_table_body table thead tr th a, .fht_table_body table thead tr th a:hover, table thead tr th, table thead tr th a { + font-size:16px; + color:#fff; +} + +.fht_fixed_header table thead tr th a:hover, .fht_table_body table thead tr th a:hover { + text-decoration: underline; +} + +.fht_fixed_header table thead tr th, .fht_table_body table thead tr th, table thead tr th { + text-align:left; +} + +.fht_table_body table tbody tr td, table tbody tr td { + font-family:Helvetica, Arial, "Sans-serif"; + font-weight:normal; + color:#666; +} + +.fht_table_body table tbody tr td, table tbody tr td { + font-size:14px; + color: #476788 !important; +} + +/***************/ +/* END CONTENT */ +/***************/ + + +/**********/ +/* LAYOUT */ +/**********/ + +.fht_table_body tbody, .fht_table_body thead, table tbody, table thead { + margin: 0 !important; + padding: 0 !important; +} + +.fht_loader { + display:block; + position:absolute; + width:100%; + height:100%; + background:#fff url('images/loadingdata.png') no-repeat center center; + z-index:1; + top:0; + left:0; + border:1px solid #333; +} + +.fht_fixed_header { + width:100%; + overflow: hidden; + position:relative; + background:#476788; +} + +.fht_table_body { + position: relative; + float: left; + margin: 0; + padding: 0; + overflow-y:auto; + overflow-x:auto; + background:#476788; +} + +.fht_table_body th, .fht_table_body td, .fht_fixed_header th, th, td { + border-left: 1px solid #bfd0e2; + border-right: 1px solid #bfd0e2; +} + +.fht_fixed_header th.first-cell, th.first-cell { + border-left-color: #476788; +} + +.fht_fixed_header th.last-cell, th.last-cell { + border-right-color: #476788; +} + +.fht_table_body table thead tr th, .fht_table_body table tbody tr td, .fht_fixed_header table thead tr th, table thead tr th, table tbody tr td { + padding: 4px 10px; + line-height: 18px; +} + +.fht_table_body table thead tr th, .fht_fixed_header table thead tr th, table thead tr th { + padding: 10px; + cursor: pointer; +} + +.fht_table_body table tbody tr, table tbody tr { + background:#dfe9f4; +} + +.fht_table_body table tbody tr.odd, table tbody tr.odd { + background:#d5e2f0; + +} + +.fht_table_body th a, .fht_fixed_header th a, table thead th a { + display: block; + position: relative; + width: 100%; + height: 100%; + float: left; +} + +.empty-cell { + + overflow:hidden; +} + +/**************/ +/* END LAYOUT */ +/**************/ \ No newline at end of file diff --git a/jquery.fixedheadertable.1.1.2.js b/jquery.fixedheadertable.1.1.2.js new file mode 100644 index 0000000..2d98bda --- /dev/null +++ b/jquery.fixedheadertable.1.1.2.js @@ -0,0 +1,219 @@ +/*! +* jquery.fixedHeaderTable. The jQuery fixedHeaderTable plugin +* +* Copyright (c) 2010 Mark Malek +* http://fixedheadertable.mmalek.com +* +* Licensed under MIT +* http://www.opensource.org/licenses/mit-license.php +* +* http://docs.jquery.com/Plugins/Authoring +* jQuery authoring guidelines +* +* Launch : October 2009 +* Version : 1.1.2 beta +* Released: TBA +* +* +* all CSS sizing (width,height) is done in pixels (px) +*/ +(function($) +{ + $.fn.fixedHeaderTable = function(options) { + var defaults = { + loader: false, + footer: false, + colBorder: true, + cloneHeaderToFooter: false, + autoResize: false, + onComplete: null + }; + + var options = $.extend(defaults, options); // get the defaults or any user set options + + return this.each(function() { + var obj = $(this); // the jQuery object the user calls fixedHeaderTable on + var origWidth = obj.width(); + + buildTable(obj,options); + + /* + * When the browser is resized set a javascript timeout (setTimeout()) on the build table function. + * If the browser is continuously being resized, reset the timeout. If the browser hasn't been resized + * for 200ms then exectue buildTable. + */ + if(options.autoResize == true) { + // if true resize the table when the browser resizes + $(window).resize( function() { + if (table.resizeTable) { + // if a timeOut is active cancel it because the browser is still being resized + clearTimeout(table.resizeTable); + } + + // setTimeout is used for resizing because some browsers will call resize() while the browser is still being resized which causes performance issues. + // if the browser hasn't been resized for 200ms then resize the table + table.resizeTable = setTimeout(function() { + + buildTable(obj,options); + + }, 200); + }); + options.origWidth = obj.width(); + } + }); + }; + + var table = function() { + this.resizeTable; // stores the value of the resize javascript timeout (setTimeout) + } + + function buildTable(obj,options) { + var objClass = obj.attr('class'); + var hasTable = obj.find("table").size() > 0; // returns true if there is a table + var hasTHead = obj.find("thead").size() > 0; // returns true if there is a thead + var hasTBody = obj.find("tbody").size() > 0; // returns true if there is a tbody + + if(hasTable && hasTHead && hasTBody) { + var parentDivWidth = obj.innerWidth(); // get the width of the parent DIV + var parentDivHeight = obj.innerHeight(); // get the height of the parent DIV + var tableBodyWidth = parentDivWidth; // width of the div surrounding the tbody (overflow:auto) + var footerHeight = 0; + + jQuery('.fht_table_body tr div.icon-row a').show(); + obj.find('div.fht_fixed_header').remove(); + + if (obj.find('div.fht_table_body').size() == 0) { + obj.wrapInner('
'); + } + + var table = obj.find('div.fht_table_body table'); + var tableWidth = parentDivWidth; + + if (options.footer && !options.cloneHeaderToFooter) { + var footerId = options.footerId; + var footerHeight = obj.find('#'+footerId).outerHeight(); // store the footer height. Used later to determine the allowed height for scrolling the table + // if footer is true and its not a cloned footer + if (!options.footerId) { + // notify the developer they wanted a footer and didn't provide content + $('body').css('background', '#f00'); + alert('Footer ID required'); + } + else { + var footerId = options.footerId; + $('#'+footerId).appendTo(obj); // move the user created footer inside the table parent div. + } + } + + obj.find('div.fht_table_body table thead tr:first th').each(function() { + $(this).removeAttr('width'); + }); + + var headerHeight = table.find('thead').outerHeight(); + if (options.footer && options.cloneHeaderToFooter) { + footerHeight = headerHeight; + } + var tableBodyHeight = parentDivHeight - headerHeight - footerHeight; + + obj.find('div.fht_table_body').css({'width':parentDivWidth + 'px', 'height':tableBodyHeight + 'px'}); + table.css('width','100%'); + + if ((table.outerHeight() - headerHeight) >= tableBodyHeight) { + if ($.browser.msie == true) { + // if IE subtract 20px to compensate for the scrollbar + tableWidth = tableWidth - 20; // default width of scrollbar for IE + } + else if (jQuery.browser.safari == true) { + // if Safari subtract 16px to compensate for the scrollbar + tableWidth = tableWidth - 15; // default width of scrollbar for Safari + } + else { + // if everything else subtract 19px to compensate for the scrollbar (FireFox, Chrome, Opera etc) + tableWidth = tableWidth - 20; // default width of scrollbar for everyone else + } + + obj.find('.fht_table_body').css('overflow','auto'); + } + else if (table.outerWidth() <= tableBodyWidth) { + obj.find('.fht_table_body').css('overflow','hidden'); + } + + table.css('width',tableWidth+'px'); + + if (obj.find('div.fht_fixed_header').size() == 0) { + obj.prepend('
'); + } + obj.find('div.fht_fixed_header').css({'width':parentDivWidth + 'px', 'height':table.find('thead').outerHeight() + 'px'}); + + var i = 0; + obj.find('div.fht_table_body table thead tr:first th').each(function() { + var width = ($.browser.msie == 'true') ? $(this).width() : $(this).width() + 1; + $(this).attr('width',width+'px'); + if($(this).find('.empty-cell').size() == 0) { + $(this).wrapInner('
'); + } + + if ($(this).is(':first-child')) { + $(this).addClass('first-cell'); + } + + if ($(this).is(':last-child')) { + $(this).addClass('last-cell'); + } + }); + + if (table.outerHeight() < tableBodyHeight) { + var lastRowHeight = tableBodyHeight - table.outerHeight(); + + if (lastRowHeight > 40) { + lastRowHeight = 40; + } + lastRowHeight = 40; + if (table.find('tbody').children('tr.last-row').size() == 0) { + table.find('tbody').append(''); + table.find('tbody tr:first td').each(function() { + table.find('tbody tr.last-row').append('
'); + }); + } + else { + table.find('tbody').children('tr.last-row').children('td.empty-cell').children('div').each(function() { + $(this).css('height',lastRowHeight+'px'); + }); + } + } + else { + table.find('tbody').children('tr.last-row').remove(); + } + + var tableHeader = obj.find('div.fht_table_body table thead'); + tableHeader.clone().appendTo('div.fht_fixed_header table'); + obj.find('div.fht_table_body table').css({'margin-top':-(tableHeader.height())+'px'}); + + if (options.footer && options.cloneHeaderToFooter) { + // put cloned header here + obj.find('div.fht_fixed_header').clone().appendTo(obj); + } + + if(options.loader) { + // if true hide the loader + $('.'+options.loaderClass).fadeOut('medium'); + } + + $.isFunction(options.onComplete) && options.onComplete.call(this); + + obj.find('.fht_table_body').scroll(function() { + // if a horizontal scrollbar is present + obj.find('.fht_fixed_header table').css('margin-left',(-this.scrollLeft)+'px'); // scroll the fixed header equal to the table body's scroll offset + if (options.footer && options.cloneHeaderToFooter) { + // if a cloned footer is visible it needs to be scrolled too + obj.find('.fht_fixed_footer_border').css('margin-left',(-this.scrollLeft)+'px'); // scroll the fixed footer equal to the table body's scroll offset + } + }); + } + else { + // you did something wrong. + $('body').css('background', '#f00'); + alert('Invalid HTML. A table, thead, and tbody are required'); + // For the future: build a dialog window that indicates an error in implementation with the specific error + } + } +})(jQuery); \ No newline at end of file diff --git a/jquery.fixedheadertable.1.1.2.min.js b/jquery.fixedheadertable.1.1.2.min.js new file mode 100644 index 0000000..44795d6 --- /dev/null +++ b/jquery.fixedheadertable.1.1.2.min.js @@ -0,0 +1,23 @@ +(function($) +{$.fn.fixedHeaderTable=function(options){var defaults={loader:false,footer:false,colBorder:true,cloneHeaderToFooter:false,autoResize:false,onComplete:null};var options=$.extend(defaults,options);return this.each(function(){var obj=$(this);var origWidth=obj.width();buildTable(obj,options);if(options.autoResize==true){$(window).resize(function(){if(table.resizeTable){clearTimeout(table.resizeTable);} +table.resizeTable=setTimeout(function(){buildTable(obj,options);},200);});options.origWidth=obj.width();}});};var table=function(){this.resizeTable;} +function buildTable(obj,options){var objClass=obj.attr('class');var hasTable=obj.find("table").size()>0;var hasTHead=obj.find("thead").size()>0;var hasTBody=obj.find("tbody").size()>0;if(hasTable&&hasTHead&&hasTBody){var parentDivWidth=obj.innerWidth();var parentDivHeight=obj.innerHeight();var tableBodyWidth=parentDivWidth;var footerHeight=0;jQuery('.fht_table_body tr div.icon-row a').show();obj.find('div.fht_fixed_header').remove();if(obj.find('div.fht_table_body').size()==0){obj.wrapInner('
');} +var table=obj.find('div.fht_table_body table');var tableWidth=parentDivWidth;if(options.footer&&!options.cloneHeaderToFooter){var footerId=options.footerId;var footerHeight=obj.find('#'+footerId).outerHeight();if(!options.footerId){$('body').css('background','#f00');alert('Footer ID required');} +else{var footerId=options.footerId;$('#'+footerId).appendTo(obj);}} +obj.find('div.fht_table_body table thead tr:first th').each(function(){$(this).removeAttr('width');});var headerHeight=table.find('thead').outerHeight();if(options.footer&&options.cloneHeaderToFooter){footerHeight=headerHeight;} +var tableBodyHeight=parentDivHeight-headerHeight-footerHeight;obj.find('div.fht_table_body').css({'width':parentDivWidth+'px','height':tableBodyHeight+'px'});table.css('width','100%');if((table.outerHeight()-headerHeight)>=tableBodyHeight){if($.browser.msie==true){tableWidth=tableWidth-20;} +else if(jQuery.browser.safari==true){tableWidth=tableWidth-15;} +else{tableWidth=tableWidth-20;} +obj.find('.fht_table_body').css('overflow','auto');} +else if(table.outerWidth()<=tableBodyWidth){obj.find('.fht_table_body').css('overflow','hidden');} +table.css('width',tableWidth+'px');if(obj.find('div.fht_fixed_header').size()==0){obj.prepend('
');} +obj.find('div.fht_fixed_header').css({'width':parentDivWidth+'px','height':table.find('thead').outerHeight()+'px'});var i=0;obj.find('div.fht_table_body table thead tr:first th').each(function(){var width=($.browser.msie=='true')?$(this).width():$(this).width()+1;$(this).attr('width',width+'px');if($(this).find('.empty-cell').size()==0){$(this).wrapInner('
');} +if($(this).is(':first-child')){$(this).addClass('first-cell');} +if($(this).is(':last-child')){$(this).addClass('last-cell');}});if(table.outerHeight()40){lastRowHeight=40;} +lastRowHeight=40;if(table.find('tbody').children('tr.last-row').size()==0){table.find('tbody').append('');table.find('tbody tr:first td').each(function(){table.find('tbody tr.last-row').append('
');});} +else{table.find('tbody').children('tr.last-row').children('td.empty-cell').children('div').each(function(){$(this).css('height',lastRowHeight+'px');});}} +else{table.find('tbody').children('tr.last-row').remove();} +var tableHeader=obj.find('div.fht_table_body table thead');tableHeader.clone().appendTo('div.fht_fixed_header table');obj.find('div.fht_table_body table').css({'margin-top':-(tableHeader.height())+'px'});if(options.footer&&options.cloneHeaderToFooter){obj.find('div.fht_fixed_header').clone().appendTo(obj);} +if(options.loader){$('.'+options.loaderClass).fadeOut('medium');} +$.isFunction(options.onComplete)&&options.onComplete.call(this);obj.find('.fht_table_body').scroll(function(){obj.find('.fht_fixed_header table').css('margin-left',(-this.scrollLeft)+'px');if(options.footer&&options.cloneHeaderToFooter){obj.find('.fht_fixed_footer_border').css('margin-left',(-this.scrollLeft)+'px');}});} +else{$('body').css('background','#f00');alert('Invalid HTML. A table, thead, and tbody are required');}}})(jQuery); \ No newline at end of file