floatthead - npm Package Compare versions

Comparing version 1.2.10 to 1.2.13

bower.json

 {
   "name": "jquery.floatThead",
-  "version": "1.2.10",
   "homepage": "http://mkoryak.github.io/floatThead/",
@@ -9,5 +8,8 @@ "authors": [
   "description": "Unobtrusively float any table's header without breaking styles or events",
-  "main": "jquery.floatThead.js",
+  "main": [
+    "dist/jquery.floatThead.js",
+    "dist/jquery.floatThead.min.js"
+  ], 
   "keywords": [
-    "float table header", "locked header", "table header", "table", "sticky header", "floatThead", "scrolling table"
+    "float table header", "locked header", "table header", "table", "sticky header", "floatThead", "scrolling table", "fixed header"
   ],
@@ -20,7 +22,12 @@ "license": "MIT",
     "test",
-    "demo"
+    "demo",
+    "Gruntfile.coffee",
+    "jquery.floatThead._.js",
+    "jquery.floatThead.js",
+    "package.json",
+    ".gitignore"
   ],
   "dependencies": {
-    "jquery": ">= 1.9.0"
+    "jquery": ">= 1.8.0"
   }
 }

CONTRIBUTING.md

@@ -11,4 +11,5 @@ How to get help with the floatThead
 Providing the following will greatly increase the chances of your issue being resolved quickly:
- - Include the browser and operating system where you are having the problem. If its IE, a screenshot is also nice since I don't have quick access to that abomination.
- - Provide a jsfiddle that reproduces your issue in its simplest form possible. If its hard to read your code, you did it wrong.
+
+ - Give me: browser version, OS version, jQuery version, floatThead version if not latest
+ - Provide a jsfiddle that reproduces your issue in its simplest form possible
  - A description of the issue and steps to reproduce
@@ -15,0 +16,0 @@

dist/jquery.floatThead-slim.js

@@ -1,2 +0,2 @@
-// @preserve jQuery.floatThead 1.2.10 - http://mkoryak.github.io/floatThead/ - Copyright (c) 2012 - 2014 Misha Koryak
+// @preserve jQuery.floatThead 1.2.12 - http://mkoryak.github.io/floatThead/ - Copyright (c) 2012 - 2015 Misha Koryak
 // @license MIT
@@ -23,5 +23,5 @@
     cellTag: null, // DEPRECATED - use headerCellSelector instead
-    headerCellSelector: 'tr:first>th:visible', //thead cells are this.
+    headerCellSelector: 'tr:visible:first>*:visible', //thead cells are this.
     zIndex: 1001, //zindex of the floating thead (actually a container div)
-    debounceResizeMs: 10,
+    debounceResizeMs: 10, //Deprecated!
     useAbsolutePositioning: true, //if set to NULL - defaults: has scrollContainer=true, doesn't have scrollContainer=false
@@ -34,3 +34,3 @@ scrollingTop: 0, //String or function($table) - offset from top of window where the header should not pass above
     getSizingRow: function($table, $cols, $fthCells){ // this is only called when using IE,
-      // override it if the first row of the table is going to contain colgroups (any cell spans greater then one col)
+      // override it if the first row of the table is going to contain colgroups (any cell spans greater than one col)
       // it should return a jquery object containing a wrapped set of table cells comprising a row that contains no col spans and is visible
@@ -44,3 +44,3 @@ return $table.find('tbody tr:visible:first>*:visible');
     enableAria: false, //will copy header text from the floated header back into the table for screen readers. Might cause the css styling to be off. beware!
-    autoReflow: false, //(undocumeted) - use MutationObserver api to reflow automatically when internal table DOM changes
+    autoReflow: false, //(undocumented) - use MutationObserver api to reflow automatically when internal table DOM changes
     debug: false //print possible issues (that don't prevent script loading) to console, if console exists.
@@ -59,2 +59,14 @@ };
 
+  //safari 7 (and perhaps others) reports table width to be parent container's width if max-width is set on table. see: https://github.com/mkoryak/floatThead/issues/108
+  var isTableWidthBug = function(){
+    if(isWebkit) {
+      var $test = $('<div style="width:0px"><table style="max-width:100%"><tr><th><div style="min-width:100px;">X</div></th></tr></table></div>');
+      $("body").append($test);
+      var ret = ($test.find("table").width() == 0);
+      $test.remove();
+      return ret;
+    }
+    return false;
+  };
+
   var createElements = !isFF && !ieVersion; //FF can read width from <col> elements, but webkit cannot
@@ -86,5 +98,11 @@
   function debug(str){
-    window.console && window.console && window.console.log && window.console.log(str);
+    window && window.console && window.console.log && window.console.log("jQuery.floatThead: " + str);
   }
 
+  //returns fractional pixel widths
+  function getOffsetWidth(el) {
+    var rect = el.getBoundingClientRect();
+    return rect.width || rect.right - rect.left;
+  }
+
   /**
@@ -122,2 +140,20 @@ * try to calculate the scrollbar width for your browser/os
   }
+
+  function tableWidth($table, $fthCells, isOuter){
+    // see: https://github.com/mkoryak/floatThead/issues/108
+    var fn = isOuter ? "outerWidth": "width";
+    if(isTableWidthBug && $table.css("max-width")){
+      var w = 0;
+      if(isOuter) {
+        w += parseInt($table.css("borderLeft"), 10);
+        w += parseInt($table.css("borderRight"), 10);
+      }
+      for(var i=0; i < $fthCells.length; i++){
+        w += $fthCells.get(i).offsetWidth;
+      }
+      return w;
+    } else {
+      return $table[fn]();
+    }
+  }
   $.fn.floatThead = function(map){
@@ -136,10 +172,8 @@ map = map || {};
 
-    if(createElements){ //make sure this is done only once no matter how many times you call the plugin fn
-        //because chrome cant read <col> width, these elements are used for sizing the table. Need to create new elements because they must be unstyled by user's css.
-        document.createElement('fthtr'); //tr
-        document.createElement('fthtd'); //td
-        document.createElement('fthfoot'); //tfoot
-    }
     var mObs = null; //mutation observer lives in here if we can use it / make it
 
+    if(util.isFunction(isTableWidthBug)) {
+      isTableWidthBug = isTableWidthBug();
+    }
+
     if(util.isString(map)){
@@ -149,3 +183,8 @@ var command = map;
       this.filter('table').each(function(){
-        var obj = $(this).data('floatThead-attached');
+        var $this = $(this);
+        var opts = $this.data('floatThead-lazy');
+        if(opts){
+          $this.floatThead(opts);
+        }
+        var obj = $this.data('floatThead-attached');
         if(obj && util.isFunction(obj[command])){
@@ -164,5 +203,11 @@ var r = obj[command]();
       if((!(key in $.floatThead.defaults)) && opts.debug){
-        debug("jQuery.floatThead: used ["+key+"] key to init plugin, but that param is not an option for the plugin. Valid options are: "+ (util.keys($.floatThead.defaults)).join(', '));
+        debug("Used ["+key+"] key to init plugin, but that param is not an option for the plugin. Valid options are: "+ (util.keys($.floatThead.defaults)).join(', '));
       }
     });
+    if(opts.debug){
+      var v = $.fn.jquery.split(".");
+      if(parseInt(v[0], 10) == 1 && parseInt(v[1], 10) <= 7){
+        debug("jQuery version "+$.fn.jquery+" detected! This plugin supports 1.8 or better, or 1.7.x with jQuery UI 1.8.24 -> http://jqueryui.com/resources/download/jquery-ui-1.8.24.zip")
+      }
+    }
 
@@ -179,7 +224,16 @@ this.filter(':not(.'+opts.floatTableClass+')').each(function(){
       canObserveMutations = opts.autoReflow && canObserveMutations; //option defaults to false!
-      var $header = $table.find('thead:first');
-      var $tbody = $table.find('tbody:first');
-      if($header.length == 0){
-        throw new Error('jQuery.floatThead must be run on a table that contains a <thead> element');
+      var $header = $table.children('thead:first');
+      var $tbody = $table.children('tbody:first');
+      if($header.length == 0 || $tbody.length == 0){
+        $table.data('floatThead-lazy', opts);
+        $table.one('reflow', function(){
+          $table.floatThead(opts);
+        });
+        return;
       }
+      if($table.data('floatThead-lazy')){
+        $table.unbind("reflow");
+      }
+      $table.data('floatThead-lazy', false);
+
       var headerFloated = false;
@@ -191,6 +245,7 @@ var scrollingTop, scrollingBottom;
       var $scrollContainer = opts.scrollContainer($table) || $([]); //guard against returned nulls
+      var locked = $scrollContainer.length > 0;
 
       var useAbsolutePositioning = opts.useAbsolutePositioning;
       if(useAbsolutePositioning == null){ //defaults: locked=true, !locked=false
-        useAbsolutePositioning = opts.scrollContainer($table).length;
+        useAbsolutePositioning = locked;
       }
@@ -208,9 +263,8 @@ if(!useAbsolutePositioning){
 
-      var locked = $scrollContainer.length > 0;
       var wrappedContainer = false; //used with absolute positioning enabled. did we need to wrap the scrollContainer/table with a relative div?
       var $wrapper = $([]); //used when absolute positioning enabled - wraps the table and the float container
-      var absoluteToFixedOnScroll = ieVersion <= 9 && !locked && useAbsolutePositioning; //on ie using absolute positioning doesnt look good with window scrolling, so we change positon to fixed on scroll, and then change it back to absolute when done.
+      var absoluteToFixedOnScroll = ieVersion <= 9 && !locked && useAbsolutePositioning; //on IE using absolute positioning doesn't look good with window scrolling, so we change position to fixed on scroll, and then change it back to absolute when done.
       var $floatTable = $("<table/>");
       var $floatColGroup = $("<colgroup/>");
-      var $tableColGroup = $table.find('colgroup:first');
+      var $tableColGroup = $table.children('colgroup:first');
       var existingColGroup = true;
@@ -221,4 +275,4 @@ if($tableColGroup.length == 0){
       }
-      var $fthRow = $('<fthrow style="display:table-row;border-spacing:0;height:0;border-collapse:collapse"/>'); //created unstyled elements
-      var $floatContainer = $('<div style="overflow: hidden;" aria-hidden="true"></div>');
+      var $fthRow = $('<fthtr style="display:table-row;border-spacing:0;height:0;border-collapse:collapse"/>'); //created unstyled elements (used for sizing the table because chrome can't read <col> width)
+      var $floatContainer = $('<div style="overflow: hidden;" aria-hidden="true" class="floatThead-floatContainer"></div>');
       var floatTableHidden = false; //this happens when the table is hidden and we do magic when making it visible
@@ -244,3 +298,3 @@ var $newHeader = $("<thead/>");
       }
-      $floatTable.attr({ //copy over some deprecated table attributes that people still like to use. Good thing poeple dont use colgroups...
+      $floatTable.attr({ //copy over some deprecated table attributes that people still like to use. Good thing people don't use colgroups...
         'cellpadding': $table.attr('cellpadding'),
@@ -260,3 +314,3 @@ 'cellspacing': $table.attr('cellspacing'),
 
-      $floatTable.addClass(opts.floatTableClass).css('margin', 0); //must have no margins or you wont be able to click on things under floating table
+      $floatTable.addClass(opts.floatTableClass).css({'margin': 0, 'border-bottom-width': 0}); //must have no margins or you won't be able to click on things under floating table
 
@@ -307,5 +361,12 @@ if(useAbsolutePositioning){
         var headerHeight = 0;
-        $header.find("tr:visible").each(function(){
+        $header.children("tr:visible").each(function(){
           headerHeight += $(this).outerHeight(true);
         });
+        if($table.css('border-collapse') == 'collapse') {
+          var tableBorderTopHeight = parseInt($table.css('border-top-width'), 10);
+          var cellBorderTopHeight = parseInt($table.find("thead tr:first").find(">*:first").css('border-top-width'), 10);
+          if(tableBorderTopHeight > cellBorderTopHeight) {
+            headerHeight -= (tableBorderTopHeight / 2); //id love to see some docs where this magic recipe is found..
+          }
+        }
         $sizerRow.outerHeight(headerHeight);
@@ -317,11 +378,11 @@ $sizerCells.outerHeight(headerHeight);
       function setFloatWidth(){
-        var tableWidth = $table.outerWidth();
-        var width = $scrollContainer.width() || tableWidth;
+        var tw = tableWidth($table, $fthCells, true);
+        var width = $scrollContainer.width() || tw;
         var floatContainerWidth = $scrollContainer.css("overflow-y") != 'hidden' ? width - scrollbarOffset.vertical : width;
         $floatContainer.width(floatContainerWidth);
         if(locked){
-          var percent = 100 * tableWidth / (floatContainerWidth);
+          var percent = 100 * tw / (floatContainerWidth);
           $floatTable.css('width', percent+'%');
         } else {
-          $floatTable.outerWidth(tableWidth);
+          $floatTable.outerWidth(tw);
         }
@@ -336,3 +397,3 @@ }
       /**
-       * get the number of columns and also rebuild resizer rows if the count is different then the last count
+       * get the number of columns and also rebuild resizer rows if the count is different than the last count
        */
@@ -351,3 +412,3 @@ function columnNum(){
           if(util.isNumber(selector)){
-            //its actually a row count.
+            //it's actually a row count. (undocumented, might be removed!)
             return selector;
@@ -400,6 +461,6 @@ }
           if(useAbsolutePositioning){ //#53, #56
-            var tableWidth = $table.width();
+            var tw = tableWidth($table, $fthCells, true);
             var wrapperWidth = $wrapper.width();
-            if(tableWidth > wrapperWidth){
-              $table.css('minWidth', tableWidth);
+            if(tw > wrapperWidth){
+              $table.css('minWidth', tw);
             }
@@ -424,6 +485,14 @@ }
           $floatTable.css(layoutAuto);
-          $table.css('minWidth', originalTableMinWidth); //this looks weird, but its not a bug. Think about it!!
-          $table.css('minWidth', $table.width()); //#121
+          $table.css('minWidth', originalTableMinWidth); //this looks weird, but it's not a bug. Think about it!!
+          $table.css('minWidth', tableWidth($table, $fthCells)); //#121
         }
       }
+      var isHeaderFloatingLogical = false; //for the purpose of this event, the header is/isnt floating, even though the element
+                                           //might be in some other state. this is what the header looks like to the user
+      function triggerFloatEvent(isFloating){
+        if(isHeaderFloatingLogical != isFloating){
+          isHeaderFloatingLogical = isFloating;
+          $table.triggerHandler("floatThead", [isFloating, $floatContainer])
+        }
+      }
       function changePositioning(isAbsolute){
@@ -453,3 +522,3 @@ if(useAbsolutePositioning != isAbsolute){
         var i;
-        var numCols = columnNum(); //if the tables columns change dynamically since last time (datatables) we need to rebuild the sizer rows and get new count
+        var numCols = columnNum(); //if the tables columns changed dynamically since last time (datatables), rebuild the sizer rows and get a new count
 
@@ -469,3 +538,3 @@ return function(){
             for(i=0; i < numCols; i++){
-              widths[i] = $rowCells.get(i).offsetWidth;
+              widths[i] = getOffsetWidth($rowCells.get(i));
             }
@@ -502,3 +571,3 @@ for(i=0; i < numCols; i++){
 
-        //this floatEnd calc was moved out of the returned function because we assume the table height doesnt change (otherwise we must reinit by calling calculateFloatContainerPosFn)
+        //this floatEnd calc was moved out of the returned function because we assume the table height doesn't change (otherwise we must reinit by calling calculateFloatContainerPosFn)
         var floatEnd;
@@ -512,2 +581,3 @@ var tableContainerGap = 0;
         var tableLeftGap = 0; //can be caused by border on container (only in locked mode)
+        var tableTopGap = 0;
         if(locked){
@@ -519,4 +589,5 @@ var containerOffset = $scrollContainer.offset();
           }
-          tableContainerGap -= floatContainerBorderWidth('top');
           tableLeftGap = floatContainerBorderWidth('left');
+          tableTopGap = floatContainerBorderWidth('top');
+          tableContainerGap -= tableTopGap;
         } else {
@@ -528,6 +599,3 @@ floatEnd = tableOffset.top - scrollingTop - floatContainerHeight + scrollingBottom + scrollbarOffset.horizontal;
         var scrollContainerLeft =  $scrollContainer.scrollLeft();
-        scrollingContainerTop = $scrollContainer.scrollTop();
 
-
-
         return function(eventType){
@@ -538,7 +606,7 @@ var isTableHidden = $table[0].offsetWidth <= 0 && $table[0].offsetHeight <= 0;
             setTimeout(function(){
-              $table.trigger("reflow");
+              $table.triggerHandler("reflow");
             }, 1);
             return null;
           }
-          if(isTableHidden){ //its hidden
+          if(isTableHidden){ //it's hidden
             floatTableHidden = true;
@@ -585,7 +653,9 @@ if(!useAbsolutePositioning){
             if (tableContainerGap >= scrollingContainerTop) {
-              var gap = tableContainerGap - scrollingContainerTop;
+              var gap = tableContainerGap - scrollingContainerTop + tableTopGap;
               top = gap > 0 ? gap : 0;
+              triggerFloatEvent(false);
             } else {
-              top = wrappedContainer ? 0 : scrollingContainerTop;
+              top = wrappedContainer ? tableTopGap : scrollingContainerTop;
               //headers stop at the top of the viewport
+              triggerFloatEvent(true);
             }
@@ -596,8 +666,10 @@ left = tableLeftGap;
               top = tableHeight - floatContainerHeight + captionScrollOffset; //scrolled past table
-            } else if (tableOffset.top > windowTop + scrollingTop) {
+            } else if (tableOffset.top >= windowTop + scrollingTop) {
               top = 0; //scrolling to table
               unfloat();
+              triggerFloatEvent(false);
             } else {
               top = scrollingTop + windowTop - tableOffset.top + tableContainerGap + (captionAlignTop ? captionHeight : 0);
               refloat(); //scrolling within table. header floated
+              triggerFloatEvent(true);
             }
@@ -609,5 +681,7 @@ left =  0;
               unfloat();
+              triggerFloatEvent(false);
             } else {
               top = tableOffset.top + scrollingContainerTop  - windowTop - tableContainerGap;
               refloat();
+              triggerFloatEvent(true);
               //headers stop at the top of the viewport
@@ -623,2 +697,3 @@ }
               refloat();
+              triggerFloatEvent(false); //this is a weird case, the header never gets unfloated and i have no no way to know
               //scrolled past the top of the table
@@ -628,2 +703,3 @@ } else {
               top = scrollingTop;
+              triggerFloatEvent(true);
             }
@@ -671,7 +747,11 @@ left = tableOffset.left - windowLeft;
         if($scrollContainer.length){
-          var sw = $scrollContainer.width(), sh = $scrollContainer.height(), th = $table.height(), tw = $table.width();
-          var offseth = sw < tw ? scWidth : 0;
-          var offsetv = sh < th ? scWidth : 0;
-          scrollbarOffset.horizontal = sw - offsetv < tw ? scWidth : 0;
-          scrollbarOffset.vertical =  sh - offseth < th ? scWidth: 0;
+          if($scrollContainer.data().perfectScrollbar){
+            scrollbarOffset = {horizontal:0, vertical:0};
+          } else {
+            var sw = $scrollContainer.width(), sh = $scrollContainer.height(), th = $table.height(), tw = tableWidth($table, $fthCells);
+            var offseth = sw < tw ? scWidth : 0;
+            var offsetv = sh < th ? scWidth : 0;
+            scrollbarOffset.horizontal = sw - offsetv < tw ? scWidth : 0;
+            scrollbarOffset.vertical = sh - offseth < th ? scWidth : 0;
+          }
         }
@@ -698,7 +778,9 @@ }
         repositionFloatContainer(calculateFloatContainerPos('windowScrollDone'), false);
-      }, 300);
+      }, 1);
 
       var windowScrollEvent = function(){
         repositionFloatContainer(calculateFloatContainerPos('windowScroll'), false);
-        windowScrollDoneEvent();
+        if(absoluteToFixedOnScroll){
+          windowScrollDoneEvent();
+        }
       };
@@ -775,3 +857,3 @@ var containerScrollEvent = function(){
           createElements && $fthGrp.remove();
-          if($newHeader.parent().length){ //only if its in the dom
+          if($newHeader.parent().length){ //only if it's in the DOM
             $newHeader.replaceWith($header);
@@ -809,5 +891,5 @@ }
           if(headerFloated){
-            return $floatContainer.find("thead").add($table.find("tbody,tfoot"));
+            return $floatContainer.children("thead").add($table.children("tbody,tfoot"));
           } else {
-            return $table.find("thead,tbody,tfoot");
+            return $table.children("thead,tbody,tfoot");
           }
@@ -819,2 +901,2 @@ }
   };
-})(jQuery);
+})(jQuery);

dist/jquery.floatThead-slim.min.js

@@ -1,3 +0,3 @@
-// @preserve jQuery.floatThead 1.2.10 - http://mkoryak.github.io/floatThead/ - Copyright (c) 2012 - 2014 Misha Koryak
+// @preserve jQuery.floatThead 1.2.12 - http://mkoryak.github.io/floatThead/ - Copyright (c) 2012 - 2015 Misha Koryak
 // @license MIT
-!function(a){function b(a,b,c){if(8==h){var d=l.width(),e=f.debounce(function(){var a=l.width();d!=a&&(d=a,c())},a);l.on(b,e)}else l.on(b,f.debounce(c,a))}function c(a){window.console&&window.console&&window.console.log&&window.console.log(a)}function d(){var b=a('<div style="width:50px;height:50px;overflow-y:scroll;position:absolute;top:-200px;left:-200px;"><div style="height:100px;width:100%"></div>');a("body").append(b);var c=b.innerWidth(),d=a("div",b).innerWidth();return b.remove(),c-d}function e(a){if(a.dataTableSettings)for(var b=0;b<a.dataTableSettings.length;b++){var c=a.dataTableSettings[b].nTable;if(a[0]==c)return!0}return!1}a.floatThead=a.floatThead||{},a.floatThead.defaults={cellTag:null,headerCellSelector:"tr:first>th:visible",zIndex:1001,debounceResizeMs:10,useAbsolutePositioning:!0,scrollingTop:0,scrollingBottom:0,scrollContainer:function(){return a([])},getSizingRow:function(a){return a.find("tbody tr:visible:first>*:visible")},floatTableClass:"floatThead-table",floatWrapperClass:"floatThead-wrapper",floatContainerClass:"floatThead-container",copyTableClass:!0,enableAria:!1,autoReflow:!1,debug:!1};var f=window._,g="undefined"!=typeof MutationObserver,h=function(){for(var a=3,b=document.createElement("b"),c=b.all||[];a=1+a,b.innerHTML="<!--[if gt IE "+a+"]><i><![endif]-->",c[0];);return a>4?a:document.documentMode}(),i=/Gecko\//.test(navigator.userAgent),j=/WebKit\//.test(navigator.userAgent),k=!i&&!h,l=a(window);a.fn.floatThead=function(i){if(i=i||{},!f&&(f=window._||a.floatThead._,!f))throw new Error("jquery.floatThead-slim.js requires underscore. You should use the non-lite version since you do not have underscore.");if(8>h)return this;k&&(document.createElement("fthtr"),document.createElement("fthtd"),document.createElement("fthfoot"));var m=null;if(f.isString(i)){var n=i,o=this;return this.filter("table").each(function(){var b=a(this).data("floatThead-attached");if(b&&f.isFunction(b[n])){var c=b[n]();"undefined"!=typeof c&&(o=c)}}),o}var p=a.extend({},a.floatThead.defaults||{},i);return a.each(i,function(b){b in a.floatThead.defaults||!p.debug||c("jQuery.floatThead: used ["+b+"] key to init plugin, but that param is not an option for the plugin. Valid options are: "+f.keys(a.floatThead.defaults).join(", "))}),this.filter(":not(."+p.floatTableClass+")").each(function(){function c(a){return a+".fth-"+A+".floatTHead"}function i(){var b=0;C.find("tr:visible").each(function(){b+=a(this).outerHeight(!0)}),ab.outerHeight(b),bb.outerHeight(b)}function n(){var a=B.outerWidth(),b=K.width()||a,c="hidden"!=K.css("overflow-y")?b-H.vertical:b;if(Z.width(c),Q){var d=100*a/c;U.css("width",d+"%")}else U.outerWidth(a)}function o(){E=(f.isFunction(p.scrollingTop)?p.scrollingTop(B):p.scrollingTop)||0,F=(f.isFunction(p.scrollingBottom)?p.scrollingBottom(B):p.scrollingBottom)||0}function q(){var b,c;if(X)b=W.find("col").length;else{var d;if(d=null==p.cellTag&&p.headerCellSelector?p.headerCellSelector:"tr:first>"+p.cellTag,f.isNumber(d))return d;c=C.find(d),b=0,c.each(function(){b+=parseInt(a(this).attr("colspan")||1,10)})}if(b!=J){J=b;for(var e,g=[],h=[],i=[],j=0;b>j;j++)g.push(p.enableAria&&(e=c.eq(j).text())?'<th scope="col" class="floatThead-col">'+e+"</th>":'<th class="floatThead-col"/>'),h.push("<col/>"),i.push("<fthtd style='display:table-cell;height:0;width:auto;'/>");h=h.join(""),g=g.join(""),k&&(i=i.join(""),Y.html(i),eb=Y.find("fthtd")),ab.html(g),bb=ab.find("th"),X||W.html(h),cb=W.find("col"),V.html(h),db=V.find("col")}return b}function r(){if(!G){if(G=!0,L){var a=B.width(),b=S.width();a>b&&B.css("minWidth",a)}B.css(hb),U.css(hb),U.append(C),D.before(_),i()}}function s(){G&&(G=!1,L&&B.width(jb),_.detach(),B.prepend(C),B.css(ib),U.css(ib),B.css("minWidth",kb),B.css("minWidth",B.width()))}function t(a){L!=a&&(L=a,Z.css({position:L?"absolute":"fixed"}))}function u(a,b,c,d){return k?c:d?p.getSizingRow(a,b,c):b}function v(){var a,b=q();return function(){cb=W.find("col");var c=u(B,cb,eb,h);if(c.length==b&&b>0){if(!X)for(a=0;b>a;a++)cb.eq(a).css("width","");s();var d=[];for(a=0;b>a;a++)d[a]=c.get(a).offsetWidth;for(a=0;b>a;a++)db.eq(a).width(d[a]),cb.eq(a).width(d[a]);r()}else U.append(C),B.css(ib),U.css(ib),i()}}function w(a){var b=K.css("border-"+a+"-width"),c=0;return b&&~b.indexOf("px")&&(c=parseInt(b,10)),c}function x(){var a,b=K.scrollTop(),c=0,d=N?M.outerHeight(!0):0,e=O?d:-d,f=Z.height(),g=B.offset(),h=0;if(Q){var i=K.offset();c=g.top-i.top+b,N&&O&&(c+=d),c-=w("top"),h=w("left")}else a=g.top-E-f+F+H.horizontal;var k=l.scrollTop(),m=l.scrollLeft(),n=K.scrollLeft();return b=K.scrollTop(),function(i){var o=B[0].offsetWidth<=0&&B[0].offsetHeight<=0;if(!o&&$)return $=!1,setTimeout(function(){B.trigger("reflow")},1),null;if(o&&($=!0,!L))return null;if("windowScroll"==i?(k=l.scrollTop(),m=l.scrollLeft()):"containerScroll"==i?(b=K.scrollTop(),n=K.scrollLeft()):"init"!=i&&(k=l.scrollTop(),m=l.scrollLeft(),b=K.scrollTop(),n=K.scrollLeft()),!j||!(0>k||0>m)){if(T)t("windowScrollDone"==i?!0:!1);else if("windowScrollDone"==i)return null;g=B.offset(),N&&O&&(g.top+=d);var p,q,u=B.outerHeight();if(Q&&L){if(c>=b){var v=c-b;p=v>0?v:0}else p=R?0:b;q=h}else!Q&&L?(k>a+u+e?p=u-f+e:g.top>k+E?(p=0,s()):(p=E+k-g.top+c+(O?d:0),r()),q=0):Q&&!L?(c>b||b-c>u?(p=g.top-k,s()):(p=g.top+b-k-c,r()),q=g.left+n-m):Q||L||(k>a+u+e?p=u+E-k+a+e:g.top>k+E?(p=g.top-k,r()):p=E,q=g.left-m);return{top:p,left:q}}}}function y(){var a=null,b=null,c=null;return function(d,e,f){null==d||a==d.top&&b==d.left||(Z.css({top:d.top,left:d.left}),a=d.top,b=d.left),e&&n(),f&&i();var g=K.scrollLeft();L&&c==g||(Z.scrollLeft(g),c=g)}}function z(){if(K.length){var a=K.width(),b=K.height(),c=B.height(),d=B.width(),e=d>a?I:0,f=c>b?I:0;H.horizontal=d>a-f?I:0,H.vertical=c>b-e?I:0}}var A=f.uniqueId(),B=a(this);if(B.data("floatThead-attached"))return!0;if(!B.is("table"))throw new Error('jQuery.floatThead must be run on a table element. ex: $("table").floatThead();');g=p.autoReflow&&g;var C=B.find("thead:first"),D=B.find("tbody:first");if(0==C.length)throw new Error("jQuery.floatThead must be run on a table that contains a <thead> element");var E,F,G=!1,H={vertical:0,horizontal:0},I=d(),J=0,K=p.scrollContainer(B)||a([]),L=p.useAbsolutePositioning;null==L&&(L=p.scrollContainer(B).length),L||(G=!0);var M=B.find("caption"),N=1==M.length;if(N)var O="top"===(M.css("caption-side")||M.attr("align")||"top");var P=a('<fthfoot style="display:table-footer-group;border-spacing:0;height:0;border-collapse:collapse;"/>'),Q=K.length>0,R=!1,S=a([]),T=9>=h&&!Q&&L,U=a("<table/>"),V=a("<colgroup/>"),W=B.find("colgroup:first"),X=!0;0==W.length&&(W=a("<colgroup/>"),X=!1);var Y=a('<fthrow style="display:table-row;border-spacing:0;height:0;border-collapse:collapse"/>'),Z=a('<div style="overflow: hidden;" aria-hidden="true"></div>'),$=!1,_=a("<thead/>"),ab=a('<tr class="size-row"/>'),bb=a([]),cb=a([]),db=a([]),eb=a([]);_.append(ab),B.prepend(W),k&&(P.append(Y),B.append(P)),U.append(V),Z.append(U),p.copyTableClass&&U.attr("class",B.attr("class")),U.attr({cellpadding:B.attr("cellpadding"),cellspacing:B.attr("cellspacing"),border:B.attr("border")});var fb=B.css("display");if(U.css({borderCollapse:B.css("borderCollapse"),border:B.css("border"),display:fb}),"none"==fb&&($=!0),U.addClass(p.floatTableClass).css("margin",0),L){var gb=function(a,b){var c=a.css("position"),d="relative"==c||"absolute"==c;if(!d||b){var e={paddingLeft:a.css("paddingLeft"),paddingRight:a.css("paddingRight")};Z.css(e),a=a.wrap("<div class='"+p.floatWrapperClass+"' style='position: relative; clear:both;'></div>").parent(),R=!0}return a};Q?(S=gb(K,!0),S.append(Z)):(S=gb(B),B.after(Z))}else B.after(Z);Z.css({position:L?"absolute":"fixed",marginTop:0,top:L?0:"auto",zIndex:p.zIndex}),Z.addClass(p.floatContainerClass),o();var hb={"table-layout":"fixed"},ib={"table-layout":B.css("tableLayout")||"auto"},jb=B[0].style.width||"",kb=B.css("minWidth")||"";z();var lb,mb=function(){(lb=v())()};mb();var nb=x(),ob=y();ob(nb("init"),!0);var pb=f.debounce(function(){ob(nb("windowScrollDone"),!1)},300),qb=function(){ob(nb("windowScroll"),!1),pb()},rb=function(){ob(nb("containerScroll"),!1)},sb=function(){o(),z(),mb(),nb=x(),(ob=y())(nb("resize"),!0,!0)},tb=f.debounce(function(){z(),o(),mb(),nb=x(),ob(nb("reflow"),!0)},1);if(Q?L?K.on(c("scroll"),rb):(K.on(c("scroll"),rb),l.on(c("scroll"),qb)):l.on(c("scroll"),qb),l.on(c("load"),tb),b(p.debounceResizeMs,c("resize"),sb),B.on("reflow",tb),e(B)&&B.on("filter",tb).on("sort",tb).on("page",tb),g){var ub=K.length?K[0]:B[0];m=new MutationObserver(function(a){for(var b=function(a){return a&&a[0]&&"THEAD"==a[0].nodeName},c=0;c<a.length;c++)if(!b(a[c].addedNodes)&&!b(a[c].removedNodes)){tb();break}}),m.observe(ub,{childList:!0,subtree:!0})}B.data("floatThead-attached",{destroy:function(){var a=".fth-"+A;s(),B.css(ib),W.remove(),k&&P.remove(),_.parent().length&&_.replaceWith(C),g&&(m.disconnect(),m=null),B.off("reflow"),K.off(a),R&&(K.length?K.unwrap():B.unwrap()),B.css("minWidth",kb),Z.remove(),B.data("floatThead-attached",!1),l.off(a)},reflow:function(){tb()},setHeaderHeight:function(){i()},getFloatContainer:function(){return Z},getRowGroups:function(){return G?Z.find("thead").add(B.find("tbody,tfoot")):B.find("thead,tbody,tfoot")}})}),this}}(jQuery);
+!function(a){function b(a,b,c){if(8==j){var d=o.width(),e=h.debounce(function(){var a=o.width();d!=a&&(d=a,c())},a);o.on(b,e)}else o.on(b,h.debounce(c,a))}function c(a){window&&window.console&&window.console.log&&window.console.log("jQuery.floatThead: "+a)}function d(a){var b=a.getBoundingClientRect();return b.width||b.right-b.left}function e(){var b=a('<div style="width:50px;height:50px;overflow-y:scroll;position:absolute;top:-200px;left:-200px;"><div style="height:100px;width:100%"></div>');a("body").append(b);var c=b.innerWidth(),d=a("div",b).innerWidth();return b.remove(),c-d}function f(a){if(a.dataTableSettings)for(var b=0;b<a.dataTableSettings.length;b++){var c=a.dataTableSettings[b].nTable;if(a[0]==c)return!0}return!1}function g(a,b,c){var d=c?"outerWidth":"width";if(m&&a.css("max-width")){var e=0;c&&(e+=parseInt(a.css("borderLeft"),10),e+=parseInt(a.css("borderRight"),10));for(var f=0;f<b.length;f++)e+=b.get(f).offsetWidth;return e}return a[d]()}a.floatThead=a.floatThead||{},a.floatThead.defaults={cellTag:null,headerCellSelector:"tr:visible:first>*:visible",zIndex:1001,debounceResizeMs:10,useAbsolutePositioning:!0,scrollingTop:0,scrollingBottom:0,scrollContainer:function(){return a([])},getSizingRow:function(a){return a.find("tbody tr:visible:first>*:visible")},floatTableClass:"floatThead-table",floatWrapperClass:"floatThead-wrapper",floatContainerClass:"floatThead-container",copyTableClass:!0,enableAria:!1,autoReflow:!1,debug:!1};var h=window._,i="undefined"!=typeof MutationObserver,j=function(){for(var a=3,b=document.createElement("b"),c=b.all||[];a=1+a,b.innerHTML="<!--[if gt IE "+a+"]><i><![endif]-->",c[0];);return a>4?a:document.documentMode}(),k=/Gecko\//.test(navigator.userAgent),l=/WebKit\//.test(navigator.userAgent),m=function(){if(l){var b=a('<div style="width:0px"><table style="max-width:100%"><tr><th><div style="min-width:100px;">X</div></th></tr></table></div>');a("body").append(b);var c=0==b.find("table").width();return b.remove(),c}return!1},n=!k&&!j,o=a(window);a.fn.floatThead=function(k){if(k=k||{},!h&&(h=window._||a.floatThead._,!h))throw new Error("jquery.floatThead-slim.js requires underscore. You should use the non-lite version since you do not have underscore.");if(8>j)return this;var p=null;if(h.isFunction(m)&&(m=m()),h.isString(k)){var q=k,r=this;return this.filter("table").each(function(){var b=a(this),c=b.data("floatThead-lazy");c&&b.floatThead(c);var d=b.data("floatThead-attached");if(d&&h.isFunction(d[q])){var e=d[q]();"undefined"!=typeof e&&(r=e)}}),r}var s=a.extend({},a.floatThead.defaults||{},k);if(a.each(k,function(b){b in a.floatThead.defaults||!s.debug||c("Used ["+b+"] key to init plugin, but that param is not an option for the plugin. Valid options are: "+h.keys(a.floatThead.defaults).join(", "))}),s.debug){var t=a.fn.jquery.split(".");1==parseInt(t[0],10)&&parseInt(t[1],10)<=7&&c("jQuery version "+a.fn.jquery+" detected! This plugin supports 1.8 or better, or 1.7.x with jQuery UI 1.8.24 -> http://jqueryui.com/resources/download/jquery-ui-1.8.24.zip")}return this.filter(":not(."+s.floatTableClass+")").each(function(){function c(a){return a+".fth-"+D+".floatTHead"}function k(){var b=0;if(F.children("tr:visible").each(function(){b+=a(this).outerHeight(!0)}),"collapse"==E.css("border-collapse")){var c=parseInt(E.css("border-top-width"),10),d=parseInt(E.find("thead tr:first").find(">*:first").css("border-top-width"),10);c>d&&(b-=c/2)}db.outerHeight(b),eb.outerHeight(b)}function m(){var a=g(E,hb,!0),b=N.width()||a,c="hidden"!=N.css("overflow-y")?b-K.vertical:b;if(ab.width(c),O){var d=100*a/c;X.css("width",d+"%")}else X.outerWidth(a)}function q(){H=(h.isFunction(s.scrollingTop)?s.scrollingTop(E):s.scrollingTop)||0,I=(h.isFunction(s.scrollingBottom)?s.scrollingBottom(E):s.scrollingBottom)||0}function r(){var b,c;if($)b=Z.find("col").length;else{var d;if(d=null==s.cellTag&&s.headerCellSelector?s.headerCellSelector:"tr:first>"+s.cellTag,h.isNumber(d))return d;c=F.find(d),b=0,c.each(function(){b+=parseInt(a(this).attr("colspan")||1,10)})}if(b!=M){M=b;for(var e,f=[],g=[],i=[],j=0;b>j;j++)f.push(s.enableAria&&(e=c.eq(j).text())?'<th scope="col" class="floatThead-col">'+e+"</th>":'<th class="floatThead-col"/>'),g.push("<col/>"),i.push("<fthtd style='display:table-cell;height:0;width:auto;'/>");g=g.join(""),f=f.join(""),n&&(i=i.join(""),_.html(i),hb=_.find("fthtd")),db.html(f),eb=db.find("th"),$||Z.html(g),fb=Z.find("col"),Y.html(g),gb=Y.find("col")}return b}function t(){if(!J){if(J=!0,P){var a=g(E,hb,!0),b=V.width();a>b&&E.css("minWidth",a)}E.css(kb),X.css(kb),X.append(F),G.before(cb),k()}}function u(){J&&(J=!1,P&&E.width(mb),cb.detach(),E.prepend(F),E.css(lb),X.css(lb),E.css("minWidth",nb),E.css("minWidth",g(E,hb)))}function v(a){ob!=a&&(ob=a,E.triggerHandler("floatThead",[a,ab]))}function w(a){P!=a&&(P=a,ab.css({position:P?"absolute":"fixed"}))}function x(a,b,c,d){return n?c:d?s.getSizingRow(a,b,c):b}function y(){var a,b=r();return function(){fb=Z.find("col");var c=x(E,fb,hb,j);if(c.length==b&&b>0){if(!$)for(a=0;b>a;a++)fb.eq(a).css("width","");u();var e=[];for(a=0;b>a;a++)e[a]=d(c.get(a));for(a=0;b>a;a++)gb.eq(a).width(e[a]),fb.eq(a).width(e[a]);t()}else X.append(F),E.css(lb),X.css(lb),k()}}function z(a){var b=N.css("border-"+a+"-width"),c=0;return b&&~b.indexOf("px")&&(c=parseInt(b,10)),c}function A(){var a,b=N.scrollTop(),c=0,d=R?Q.outerHeight(!0):0,e=S?d:-d,f=ab.height(),g=E.offset(),h=0,i=0;if(O){var j=N.offset();c=g.top-j.top+b,R&&S&&(c+=d),h=z("left"),i=z("top"),c-=i}else a=g.top-H-f+I+K.horizontal;var k=o.scrollTop(),m=o.scrollLeft(),n=N.scrollLeft();return function(j){var p=E[0].offsetWidth<=0&&E[0].offsetHeight<=0;if(!p&&bb)return bb=!1,setTimeout(function(){E.triggerHandler("reflow")},1),null;if(p&&(bb=!0,!P))return null;if("windowScroll"==j?(k=o.scrollTop(),m=o.scrollLeft()):"containerScroll"==j?(b=N.scrollTop(),n=N.scrollLeft()):"init"!=j&&(k=o.scrollTop(),m=o.scrollLeft(),b=N.scrollTop(),n=N.scrollLeft()),!l||!(0>k||0>m)){if(W)w("windowScrollDone"==j?!0:!1);else if("windowScrollDone"==j)return null;g=E.offset(),R&&S&&(g.top+=d);var q,r,s=E.outerHeight();if(O&&P){if(c>=b){var x=c-b+i;q=x>0?x:0,v(!1)}else q=U?i:b,v(!0);r=h}else!O&&P?(k>a+s+e?q=s-f+e:g.top>=k+H?(q=0,u(),v(!1)):(q=H+k-g.top+c+(S?d:0),t(),v(!0)),r=0):O&&!P?(c>b||b-c>s?(q=g.top-k,u(),v(!1)):(q=g.top+b-k-c,t(),v(!0)),r=g.left+n-m):O||P||(k>a+s+e?q=s+H-k+a+e:g.top>k+H?(q=g.top-k,t(),v(!1)):(q=H,v(!0)),r=g.left-m);return{top:q,left:r}}}}function B(){var a=null,b=null,c=null;return function(d,e,f){null==d||a==d.top&&b==d.left||(ab.css({top:d.top,left:d.left}),a=d.top,b=d.left),e&&m(),f&&k();var g=N.scrollLeft();P&&c==g||(ab.scrollLeft(g),c=g)}}function C(){if(N.length)if(N.data().perfectScrollbar)K={horizontal:0,vertical:0};else{var a=N.width(),b=N.height(),c=E.height(),d=g(E,hb),e=d>a?L:0,f=c>b?L:0;K.horizontal=d>a-f?L:0,K.vertical=c>b-e?L:0}}var D=h.uniqueId(),E=a(this);if(E.data("floatThead-attached"))return!0;if(!E.is("table"))throw new Error('jQuery.floatThead must be run on a table element. ex: $("table").floatThead();');i=s.autoReflow&&i;var F=E.children("thead:first"),G=E.children("tbody:first");if(0==F.length||0==G.length)return E.data("floatThead-lazy",s),void E.one("reflow",function(){E.floatThead(s)});E.data("floatThead-lazy")&&E.unbind("reflow"),E.data("floatThead-lazy",!1);var H,I,J=!1,K={vertical:0,horizontal:0},L=e(),M=0,N=s.scrollContainer(E)||a([]),O=N.length>0,P=s.useAbsolutePositioning;null==P&&(P=O),P||(J=!0);var Q=E.find("caption"),R=1==Q.length;if(R)var S="top"===(Q.css("caption-side")||Q.attr("align")||"top");var T=a('<fthfoot style="display:table-footer-group;border-spacing:0;height:0;border-collapse:collapse;"/>'),U=!1,V=a([]),W=9>=j&&!O&&P,X=a("<table/>"),Y=a("<colgroup/>"),Z=E.children("colgroup:first"),$=!0;0==Z.length&&(Z=a("<colgroup/>"),$=!1);var _=a('<fthtr style="display:table-row;border-spacing:0;height:0;border-collapse:collapse"/>'),ab=a('<div style="overflow: hidden;" aria-hidden="true" class="floatThead-floatContainer"></div>'),bb=!1,cb=a("<thead/>"),db=a('<tr class="size-row"/>'),eb=a([]),fb=a([]),gb=a([]),hb=a([]);cb.append(db),E.prepend(Z),n&&(T.append(_),E.append(T)),X.append(Y),ab.append(X),s.copyTableClass&&X.attr("class",E.attr("class")),X.attr({cellpadding:E.attr("cellpadding"),cellspacing:E.attr("cellspacing"),border:E.attr("border")});var ib=E.css("display");if(X.css({borderCollapse:E.css("borderCollapse"),border:E.css("border"),display:ib}),"none"==ib&&(bb=!0),X.addClass(s.floatTableClass).css({margin:0,"border-bottom-width":0}),P){var jb=function(a,b){var c=a.css("position"),d="relative"==c||"absolute"==c;if(!d||b){var e={paddingLeft:a.css("paddingLeft"),paddingRight:a.css("paddingRight")};ab.css(e),a=a.wrap("<div class='"+s.floatWrapperClass+"' style='position: relative; clear:both;'></div>").parent(),U=!0}return a};O?(V=jb(N,!0),V.append(ab)):(V=jb(E),E.after(ab))}else E.after(ab);ab.css({position:P?"absolute":"fixed",marginTop:0,top:P?0:"auto",zIndex:s.zIndex}),ab.addClass(s.floatContainerClass),q();var kb={"table-layout":"fixed"},lb={"table-layout":E.css("tableLayout")||"auto"},mb=E[0].style.width||"",nb=E.css("minWidth")||"",ob=!1;C();var pb,qb=function(){(pb=y())()};qb();var rb=A(),sb=B();sb(rb("init"),!0);var tb=h.debounce(function(){sb(rb("windowScrollDone"),!1)},1),ub=function(){sb(rb("windowScroll"),!1),W&&tb()},vb=function(){sb(rb("containerScroll"),!1)},wb=function(){q(),C(),qb(),rb=A(),(sb=B())(rb("resize"),!0,!0)},xb=h.debounce(function(){C(),q(),qb(),rb=A(),sb(rb("reflow"),!0)},1);if(O?P?N.on(c("scroll"),vb):(N.on(c("scroll"),vb),o.on(c("scroll"),ub)):o.on(c("scroll"),ub),o.on(c("load"),xb),b(s.debounceResizeMs,c("resize"),wb),E.on("reflow",xb),f(E)&&E.on("filter",xb).on("sort",xb).on("page",xb),i){var yb=N.length?N[0]:E[0];p=new MutationObserver(function(a){for(var b=function(a){return a&&a[0]&&"THEAD"==a[0].nodeName},c=0;c<a.length;c++)if(!b(a[c].addedNodes)&&!b(a[c].removedNodes)){xb();break}}),p.observe(yb,{childList:!0,subtree:!0})}E.data("floatThead-attached",{destroy:function(){var a=".fth-"+D;u(),E.css(lb),Z.remove(),n&&T.remove(),cb.parent().length&&cb.replaceWith(F),i&&(p.disconnect(),p=null),E.off("reflow"),N.off(a),U&&(N.length?N.unwrap():E.unwrap()),E.css("minWidth",nb),ab.remove(),E.data("floatThead-attached",!1),o.off(a)},reflow:function(){xb()},setHeaderHeight:function(){k()},getFloatContainer:function(){return ab},getRowGroups:function(){return J?ab.children("thead").add(E.children("tbody,tfoot")):E.children("thead,tbody,tfoot")}})}),this}}(jQuery);

dist/jquery.floatThead.js

@@ -1,2 +0,2 @@
-// @preserve jQuery.floatThead 1.2.10 - http://mkoryak.github.io/floatThead/ - Copyright (c) 2012 - 2014 Misha Koryak
+// @preserve jQuery.floatThead 1.2.12 - http://mkoryak.github.io/floatThead/ - Copyright (c) 2012 - 2015 Misha Koryak
 // @license MIT
@@ -23,5 +23,5 @@
     cellTag: null, // DEPRECATED - use headerCellSelector instead
-    headerCellSelector: 'tr:first>th:visible', //thead cells are this.
+    headerCellSelector: 'tr:visible:first>*:visible', //thead cells are this.
     zIndex: 1001, //zindex of the floating thead (actually a container div)
-    debounceResizeMs: 10,
+    debounceResizeMs: 10, //Deprecated!
     useAbsolutePositioning: true, //if set to NULL - defaults: has scrollContainer=true, doesn't have scrollContainer=false
@@ -34,3 +34,3 @@ scrollingTop: 0, //String or function($table) - offset from top of window where the header should not pass above
     getSizingRow: function($table, $cols, $fthCells){ // this is only called when using IE,
-      // override it if the first row of the table is going to contain colgroups (any cell spans greater then one col)
+      // override it if the first row of the table is going to contain colgroups (any cell spans greater than one col)
       // it should return a jquery object containing a wrapped set of table cells comprising a row that contains no col spans and is visible
@@ -44,3 +44,3 @@ return $table.find('tbody tr:visible:first>*:visible');
     enableAria: false, //will copy header text from the floated header back into the table for screen readers. Might cause the css styling to be off. beware!
-    autoReflow: false, //(undocumeted) - use MutationObserver api to reflow automatically when internal table DOM changes
+    autoReflow: false, //(undocumented) - use MutationObserver api to reflow automatically when internal table DOM changes
     debug: false //print possible issues (that don't prevent script loading) to console, if console exists.
@@ -59,2 +59,14 @@ };
 
+  //safari 7 (and perhaps others) reports table width to be parent container's width if max-width is set on table. see: https://github.com/mkoryak/floatThead/issues/108
+  var isTableWidthBug = function(){
+    if(isWebkit) {
+      var $test = $('<div style="width:0px"><table style="max-width:100%"><tr><th><div style="min-width:100px;">X</div></th></tr></table></div>');
+      $("body").append($test);
+      var ret = ($test.find("table").width() == 0);
+      $test.remove();
+      return ret;
+    }
+    return false;
+  };
+
   var createElements = !isFF && !ieVersion; //FF can read width from <col> elements, but webkit cannot
@@ -86,5 +98,11 @@
   function debug(str){
-    window.console && window.console && window.console.log && window.console.log(str);
+    window && window.console && window.console.log && window.console.log("jQuery.floatThead: " + str);
   }
 
+  //returns fractional pixel widths
+  function getOffsetWidth(el) {
+    var rect = el.getBoundingClientRect();
+    return rect.width || rect.right - rect.left;
+  }
+
   /**
@@ -122,2 +140,20 @@ * try to calculate the scrollbar width for your browser/os
   }
+
+  function tableWidth($table, $fthCells, isOuter){
+    // see: https://github.com/mkoryak/floatThead/issues/108
+    var fn = isOuter ? "outerWidth": "width";
+    if(isTableWidthBug && $table.css("max-width")){
+      var w = 0;
+      if(isOuter) {
+        w += parseInt($table.css("borderLeft"), 10);
+        w += parseInt($table.css("borderRight"), 10);
+      }
+      for(var i=0; i < $fthCells.length; i++){
+        w += $fthCells.get(i).offsetWidth;
+      }
+      return w;
+    } else {
+      return $table[fn]();
+    }
+  }
   $.fn.floatThead = function(map){
@@ -136,10 +172,8 @@ map = map || {};
 
-    if(createElements){ //make sure this is done only once no matter how many times you call the plugin fn
-        //because chrome cant read <col> width, these elements are used for sizing the table. Need to create new elements because they must be unstyled by user's css.
-        document.createElement('fthtr'); //tr
-        document.createElement('fthtd'); //td
-        document.createElement('fthfoot'); //tfoot
-    }
     var mObs = null; //mutation observer lives in here if we can use it / make it
 
+    if(util.isFunction(isTableWidthBug)) {
+      isTableWidthBug = isTableWidthBug();
+    }
+
     if(util.isString(map)){
@@ -149,3 +183,8 @@ var command = map;
       this.filter('table').each(function(){
-        var obj = $(this).data('floatThead-attached');
+        var $this = $(this);
+        var opts = $this.data('floatThead-lazy');
+        if(opts){
+          $this.floatThead(opts);
+        }
+        var obj = $this.data('floatThead-attached');
         if(obj && util.isFunction(obj[command])){
@@ -164,5 +203,11 @@ var r = obj[command]();
       if((!(key in $.floatThead.defaults)) && opts.debug){
-        debug("jQuery.floatThead: used ["+key+"] key to init plugin, but that param is not an option for the plugin. Valid options are: "+ (util.keys($.floatThead.defaults)).join(', '));
+        debug("Used ["+key+"] key to init plugin, but that param is not an option for the plugin. Valid options are: "+ (util.keys($.floatThead.defaults)).join(', '));
       }
     });
+    if(opts.debug){
+      var v = $.fn.jquery.split(".");
+      if(parseInt(v[0], 10) == 1 && parseInt(v[1], 10) <= 7){
+        debug("jQuery version "+$.fn.jquery+" detected! This plugin supports 1.8 or better, or 1.7.x with jQuery UI 1.8.24 -> http://jqueryui.com/resources/download/jquery-ui-1.8.24.zip")
+      }
+    }
 
@@ -179,7 +224,16 @@ this.filter(':not(.'+opts.floatTableClass+')').each(function(){
       canObserveMutations = opts.autoReflow && canObserveMutations; //option defaults to false!
-      var $header = $table.find('thead:first');
-      var $tbody = $table.find('tbody:first');
-      if($header.length == 0){
-        throw new Error('jQuery.floatThead must be run on a table that contains a <thead> element');
+      var $header = $table.children('thead:first');
+      var $tbody = $table.children('tbody:first');
+      if($header.length == 0 || $tbody.length == 0){
+        $table.data('floatThead-lazy', opts);
+        $table.one('reflow', function(){
+          $table.floatThead(opts);
+        });
+        return;
       }
+      if($table.data('floatThead-lazy')){
+        $table.unbind("reflow");
+      }
+      $table.data('floatThead-lazy', false);
+
       var headerFloated = false;
@@ -191,6 +245,7 @@ var scrollingTop, scrollingBottom;
       var $scrollContainer = opts.scrollContainer($table) || $([]); //guard against returned nulls
+      var locked = $scrollContainer.length > 0;
 
       var useAbsolutePositioning = opts.useAbsolutePositioning;
       if(useAbsolutePositioning == null){ //defaults: locked=true, !locked=false
-        useAbsolutePositioning = opts.scrollContainer($table).length;
+        useAbsolutePositioning = locked;
       }
@@ -208,9 +263,8 @@ if(!useAbsolutePositioning){
 
-      var locked = $scrollContainer.length > 0;
       var wrappedContainer = false; //used with absolute positioning enabled. did we need to wrap the scrollContainer/table with a relative div?
       var $wrapper = $([]); //used when absolute positioning enabled - wraps the table and the float container
-      var absoluteToFixedOnScroll = ieVersion <= 9 && !locked && useAbsolutePositioning; //on ie using absolute positioning doesnt look good with window scrolling, so we change positon to fixed on scroll, and then change it back to absolute when done.
+      var absoluteToFixedOnScroll = ieVersion <= 9 && !locked && useAbsolutePositioning; //on IE using absolute positioning doesn't look good with window scrolling, so we change position to fixed on scroll, and then change it back to absolute when done.
       var $floatTable = $("<table/>");
       var $floatColGroup = $("<colgroup/>");
-      var $tableColGroup = $table.find('colgroup:first');
+      var $tableColGroup = $table.children('colgroup:first');
       var existingColGroup = true;
@@ -221,4 +275,4 @@ if($tableColGroup.length == 0){
       }
-      var $fthRow = $('<fthrow style="display:table-row;border-spacing:0;height:0;border-collapse:collapse"/>'); //created unstyled elements
-      var $floatContainer = $('<div style="overflow: hidden;" aria-hidden="true"></div>');
+      var $fthRow = $('<fthtr style="display:table-row;border-spacing:0;height:0;border-collapse:collapse"/>'); //created unstyled elements (used for sizing the table because chrome can't read <col> width)
+      var $floatContainer = $('<div style="overflow: hidden;" aria-hidden="true" class="floatThead-floatContainer"></div>');
       var floatTableHidden = false; //this happens when the table is hidden and we do magic when making it visible
@@ -244,3 +298,3 @@ var $newHeader = $("<thead/>");
       }
-      $floatTable.attr({ //copy over some deprecated table attributes that people still like to use. Good thing poeple dont use colgroups...
+      $floatTable.attr({ //copy over some deprecated table attributes that people still like to use. Good thing people don't use colgroups...
         'cellpadding': $table.attr('cellpadding'),
@@ -260,3 +314,3 @@ 'cellspacing': $table.attr('cellspacing'),
 
-      $floatTable.addClass(opts.floatTableClass).css('margin', 0); //must have no margins or you wont be able to click on things under floating table
+      $floatTable.addClass(opts.floatTableClass).css({'margin': 0, 'border-bottom-width': 0}); //must have no margins or you won't be able to click on things under floating table
 
@@ -307,5 +361,12 @@ if(useAbsolutePositioning){
         var headerHeight = 0;
-        $header.find("tr:visible").each(function(){
+        $header.children("tr:visible").each(function(){
           headerHeight += $(this).outerHeight(true);
         });
+        if($table.css('border-collapse') == 'collapse') {
+          var tableBorderTopHeight = parseInt($table.css('border-top-width'), 10);
+          var cellBorderTopHeight = parseInt($table.find("thead tr:first").find(">*:first").css('border-top-width'), 10);
+          if(tableBorderTopHeight > cellBorderTopHeight) {
+            headerHeight -= (tableBorderTopHeight / 2); //id love to see some docs where this magic recipe is found..
+          }
+        }
         $sizerRow.outerHeight(headerHeight);
@@ -317,11 +378,11 @@ $sizerCells.outerHeight(headerHeight);
       function setFloatWidth(){
-        var tableWidth = $table.outerWidth();
-        var width = $scrollContainer.width() || tableWidth;
+        var tw = tableWidth($table, $fthCells, true);
+        var width = $scrollContainer.width() || tw;
         var floatContainerWidth = $scrollContainer.css("overflow-y") != 'hidden' ? width - scrollbarOffset.vertical : width;
         $floatContainer.width(floatContainerWidth);
         if(locked){
-          var percent = 100 * tableWidth / (floatContainerWidth);
+          var percent = 100 * tw / (floatContainerWidth);
           $floatTable.css('width', percent+'%');
         } else {
-          $floatTable.outerWidth(tableWidth);
+          $floatTable.outerWidth(tw);
         }
@@ -336,3 +397,3 @@ }
       /**
-       * get the number of columns and also rebuild resizer rows if the count is different then the last count
+       * get the number of columns and also rebuild resizer rows if the count is different than the last count
        */
@@ -351,3 +412,3 @@ function columnNum(){
           if(util.isNumber(selector)){
-            //its actually a row count.
+            //it's actually a row count. (undocumented, might be removed!)
             return selector;
@@ -400,6 +461,6 @@ }
           if(useAbsolutePositioning){ //#53, #56
-            var tableWidth = $table.width();
+            var tw = tableWidth($table, $fthCells, true);
             var wrapperWidth = $wrapper.width();
-            if(tableWidth > wrapperWidth){
-              $table.css('minWidth', tableWidth);
+            if(tw > wrapperWidth){
+              $table.css('minWidth', tw);
             }
@@ -424,6 +485,14 @@ }
           $floatTable.css(layoutAuto);
-          $table.css('minWidth', originalTableMinWidth); //this looks weird, but its not a bug. Think about it!!
-          $table.css('minWidth', $table.width()); //#121
+          $table.css('minWidth', originalTableMinWidth); //this looks weird, but it's not a bug. Think about it!!
+          $table.css('minWidth', tableWidth($table, $fthCells)); //#121
         }
       }
+      var isHeaderFloatingLogical = false; //for the purpose of this event, the header is/isnt floating, even though the element
+                                           //might be in some other state. this is what the header looks like to the user
+      function triggerFloatEvent(isFloating){
+        if(isHeaderFloatingLogical != isFloating){
+          isHeaderFloatingLogical = isFloating;
+          $table.triggerHandler("floatThead", [isFloating, $floatContainer])
+        }
+      }
       function changePositioning(isAbsolute){
@@ -453,3 +522,3 @@ if(useAbsolutePositioning != isAbsolute){
         var i;
-        var numCols = columnNum(); //if the tables columns change dynamically since last time (datatables) we need to rebuild the sizer rows and get new count
+        var numCols = columnNum(); //if the tables columns changed dynamically since last time (datatables), rebuild the sizer rows and get a new count
 
@@ -469,3 +538,3 @@ return function(){
             for(i=0; i < numCols; i++){
-              widths[i] = $rowCells.get(i).offsetWidth;
+              widths[i] = getOffsetWidth($rowCells.get(i));
             }
@@ -502,3 +571,3 @@ for(i=0; i < numCols; i++){
 
-        //this floatEnd calc was moved out of the returned function because we assume the table height doesnt change (otherwise we must reinit by calling calculateFloatContainerPosFn)
+        //this floatEnd calc was moved out of the returned function because we assume the table height doesn't change (otherwise we must reinit by calling calculateFloatContainerPosFn)
         var floatEnd;
@@ -512,2 +581,3 @@ var tableContainerGap = 0;
         var tableLeftGap = 0; //can be caused by border on container (only in locked mode)
+        var tableTopGap = 0;
         if(locked){
@@ -519,4 +589,5 @@ var containerOffset = $scrollContainer.offset();
           }
-          tableContainerGap -= floatContainerBorderWidth('top');
           tableLeftGap = floatContainerBorderWidth('left');
+          tableTopGap = floatContainerBorderWidth('top');
+          tableContainerGap -= tableTopGap;
         } else {
@@ -528,6 +599,3 @@ floatEnd = tableOffset.top - scrollingTop - floatContainerHeight + scrollingBottom + scrollbarOffset.horizontal;
         var scrollContainerLeft =  $scrollContainer.scrollLeft();
-        scrollingContainerTop = $scrollContainer.scrollTop();
 
-
-
         return function(eventType){
@@ -538,7 +606,7 @@ var isTableHidden = $table[0].offsetWidth <= 0 && $table[0].offsetHeight <= 0;
             setTimeout(function(){
-              $table.trigger("reflow");
+              $table.triggerHandler("reflow");
             }, 1);
             return null;
           }
-          if(isTableHidden){ //its hidden
+          if(isTableHidden){ //it's hidden
             floatTableHidden = true;
@@ -585,7 +653,9 @@ if(!useAbsolutePositioning){
             if (tableContainerGap >= scrollingContainerTop) {
-              var gap = tableContainerGap - scrollingContainerTop;
+              var gap = tableContainerGap - scrollingContainerTop + tableTopGap;
               top = gap > 0 ? gap : 0;
+              triggerFloatEvent(false);
             } else {
-              top = wrappedContainer ? 0 : scrollingContainerTop;
+              top = wrappedContainer ? tableTopGap : scrollingContainerTop;
               //headers stop at the top of the viewport
+              triggerFloatEvent(true);
             }
@@ -596,8 +666,10 @@ left = tableLeftGap;
               top = tableHeight - floatContainerHeight + captionScrollOffset; //scrolled past table
-            } else if (tableOffset.top > windowTop + scrollingTop) {
+            } else if (tableOffset.top >= windowTop + scrollingTop) {
               top = 0; //scrolling to table
               unfloat();
+              triggerFloatEvent(false);
             } else {
               top = scrollingTop + windowTop - tableOffset.top + tableContainerGap + (captionAlignTop ? captionHeight : 0);
               refloat(); //scrolling within table. header floated
+              triggerFloatEvent(true);
             }
@@ -609,5 +681,7 @@ left =  0;
               unfloat();
+              triggerFloatEvent(false);
             } else {
               top = tableOffset.top + scrollingContainerTop  - windowTop - tableContainerGap;
               refloat();
+              triggerFloatEvent(true);
               //headers stop at the top of the viewport
@@ -623,2 +697,3 @@ }
               refloat();
+              triggerFloatEvent(false); //this is a weird case, the header never gets unfloated and i have no no way to know
               //scrolled past the top of the table
@@ -628,2 +703,3 @@ } else {
               top = scrollingTop;
+              triggerFloatEvent(true);
             }
@@ -671,7 +747,11 @@ left = tableOffset.left - windowLeft;
         if($scrollContainer.length){
-          var sw = $scrollContainer.width(), sh = $scrollContainer.height(), th = $table.height(), tw = $table.width();
-          var offseth = sw < tw ? scWidth : 0;
-          var offsetv = sh < th ? scWidth : 0;
-          scrollbarOffset.horizontal = sw - offsetv < tw ? scWidth : 0;
-          scrollbarOffset.vertical =  sh - offseth < th ? scWidth: 0;
+          if($scrollContainer.data().perfectScrollbar){
+            scrollbarOffset = {horizontal:0, vertical:0};
+          } else {
+            var sw = $scrollContainer.width(), sh = $scrollContainer.height(), th = $table.height(), tw = tableWidth($table, $fthCells);
+            var offseth = sw < tw ? scWidth : 0;
+            var offsetv = sh < th ? scWidth : 0;
+            scrollbarOffset.horizontal = sw - offsetv < tw ? scWidth : 0;
+            scrollbarOffset.vertical = sh - offseth < th ? scWidth : 0;
+          }
         }
@@ -698,7 +778,9 @@ }
         repositionFloatContainer(calculateFloatContainerPos('windowScrollDone'), false);
-      }, 300);
+      }, 1);
 
       var windowScrollEvent = function(){
         repositionFloatContainer(calculateFloatContainerPos('windowScroll'), false);
-        windowScrollDoneEvent();
+        if(absoluteToFixedOnScroll){
+          windowScrollDoneEvent();
+        }
       };
@@ -775,3 +857,3 @@ var containerScrollEvent = function(){
           createElements && $fthGrp.remove();
-          if($newHeader.parent().length){ //only if its in the dom
+          if($newHeader.parent().length){ //only if it's in the DOM
             $newHeader.replaceWith($header);
@@ -809,5 +891,5 @@ }
           if(headerFloated){
-            return $floatContainer.find("thead").add($table.find("tbody,tfoot"));
+            return $floatContainer.children("thead").add($table.children("tbody,tfoot"));
           } else {
-            return $table.find("thead,tbody,tfoot");
+            return $table.children("thead,tbody,tfoot");
           }
@@ -814,0 +896,0 @@ }

dist/jquery.floatThead.min.js

@@ -1,3 +0,3 @@
-// @preserve jQuery.floatThead 1.2.10 - http://mkoryak.github.io/floatThead/ - Copyright (c) 2012 - 2014 Misha Koryak
+// @preserve jQuery.floatThead 1.2.12 - http://mkoryak.github.io/floatThead/ - Copyright (c) 2012 - 2015 Misha Koryak
 // @license MIT
-!function(a){function b(a,b,c){if(8==h){var d=l.width(),e=f.debounce(function(){var a=l.width();d!=a&&(d=a,c())},a);l.on(b,e)}else l.on(b,f.debounce(c,a))}function c(a){window.console&&window.console&&window.console.log&&window.console.log(a)}function d(){var b=a('<div style="width:50px;height:50px;overflow-y:scroll;position:absolute;top:-200px;left:-200px;"><div style="height:100px;width:100%"></div>');a("body").append(b);var c=b.innerWidth(),d=a("div",b).innerWidth();return b.remove(),c-d}function e(a){if(a.dataTableSettings)for(var b=0;b<a.dataTableSettings.length;b++){var c=a.dataTableSettings[b].nTable;if(a[0]==c)return!0}return!1}a.floatThead=a.floatThead||{},a.floatThead.defaults={cellTag:null,headerCellSelector:"tr:first>th:visible",zIndex:1001,debounceResizeMs:10,useAbsolutePositioning:!0,scrollingTop:0,scrollingBottom:0,scrollContainer:function(){return a([])},getSizingRow:function(a){return a.find("tbody tr:visible:first>*:visible")},floatTableClass:"floatThead-table",floatWrapperClass:"floatThead-wrapper",floatContainerClass:"floatThead-container",copyTableClass:!0,enableAria:!1,autoReflow:!1,debug:!1};var f=window._,g="undefined"!=typeof MutationObserver,h=function(){for(var a=3,b=document.createElement("b"),c=b.all||[];a=1+a,b.innerHTML="<!--[if gt IE "+a+"]><i><![endif]-->",c[0];);return a>4?a:document.documentMode}(),i=/Gecko\//.test(navigator.userAgent),j=/WebKit\//.test(navigator.userAgent),k=!i&&!h,l=a(window);a.fn.floatThead=function(i){if(i=i||{},!f&&(f=window._||a.floatThead._,!f))throw new Error("jquery.floatThead-slim.js requires underscore. You should use the non-lite version since you do not have underscore.");if(8>h)return this;k&&(document.createElement("fthtr"),document.createElement("fthtd"),document.createElement("fthfoot"));var m=null;if(f.isString(i)){var n=i,o=this;return this.filter("table").each(function(){var b=a(this).data("floatThead-attached");if(b&&f.isFunction(b[n])){var c=b[n]();"undefined"!=typeof c&&(o=c)}}),o}var p=a.extend({},a.floatThead.defaults||{},i);return a.each(i,function(b){b in a.floatThead.defaults||!p.debug||c("jQuery.floatThead: used ["+b+"] key to init plugin, but that param is not an option for the plugin. Valid options are: "+f.keys(a.floatThead.defaults).join(", "))}),this.filter(":not(."+p.floatTableClass+")").each(function(){function c(a){return a+".fth-"+A+".floatTHead"}function i(){var b=0;C.find("tr:visible").each(function(){b+=a(this).outerHeight(!0)}),ab.outerHeight(b),bb.outerHeight(b)}function n(){var a=B.outerWidth(),b=K.width()||a,c="hidden"!=K.css("overflow-y")?b-H.vertical:b;if(Z.width(c),Q){var d=100*a/c;U.css("width",d+"%")}else U.outerWidth(a)}function o(){E=(f.isFunction(p.scrollingTop)?p.scrollingTop(B):p.scrollingTop)||0,F=(f.isFunction(p.scrollingBottom)?p.scrollingBottom(B):p.scrollingBottom)||0}function q(){var b,c;if(X)b=W.find("col").length;else{var d;if(d=null==p.cellTag&&p.headerCellSelector?p.headerCellSelector:"tr:first>"+p.cellTag,f.isNumber(d))return d;c=C.find(d),b=0,c.each(function(){b+=parseInt(a(this).attr("colspan")||1,10)})}if(b!=J){J=b;for(var e,g=[],h=[],i=[],j=0;b>j;j++)g.push(p.enableAria&&(e=c.eq(j).text())?'<th scope="col" class="floatThead-col">'+e+"</th>":'<th class="floatThead-col"/>'),h.push("<col/>"),i.push("<fthtd style='display:table-cell;height:0;width:auto;'/>");h=h.join(""),g=g.join(""),k&&(i=i.join(""),Y.html(i),eb=Y.find("fthtd")),ab.html(g),bb=ab.find("th"),X||W.html(h),cb=W.find("col"),V.html(h),db=V.find("col")}return b}function r(){if(!G){if(G=!0,L){var a=B.width(),b=S.width();a>b&&B.css("minWidth",a)}B.css(hb),U.css(hb),U.append(C),D.before(_),i()}}function s(){G&&(G=!1,L&&B.width(jb),_.detach(),B.prepend(C),B.css(ib),U.css(ib),B.css("minWidth",kb),B.css("minWidth",B.width()))}function t(a){L!=a&&(L=a,Z.css({position:L?"absolute":"fixed"}))}function u(a,b,c,d){return k?c:d?p.getSizingRow(a,b,c):b}function v(){var a,b=q();return function(){cb=W.find("col");var c=u(B,cb,eb,h);if(c.length==b&&b>0){if(!X)for(a=0;b>a;a++)cb.eq(a).css("width","");s();var d=[];for(a=0;b>a;a++)d[a]=c.get(a).offsetWidth;for(a=0;b>a;a++)db.eq(a).width(d[a]),cb.eq(a).width(d[a]);r()}else U.append(C),B.css(ib),U.css(ib),i()}}function w(a){var b=K.css("border-"+a+"-width"),c=0;return b&&~b.indexOf("px")&&(c=parseInt(b,10)),c}function x(){var a,b=K.scrollTop(),c=0,d=N?M.outerHeight(!0):0,e=O?d:-d,f=Z.height(),g=B.offset(),h=0;if(Q){var i=K.offset();c=g.top-i.top+b,N&&O&&(c+=d),c-=w("top"),h=w("left")}else a=g.top-E-f+F+H.horizontal;var k=l.scrollTop(),m=l.scrollLeft(),n=K.scrollLeft();return b=K.scrollTop(),function(i){var o=B[0].offsetWidth<=0&&B[0].offsetHeight<=0;if(!o&&$)return $=!1,setTimeout(function(){B.trigger("reflow")},1),null;if(o&&($=!0,!L))return null;if("windowScroll"==i?(k=l.scrollTop(),m=l.scrollLeft()):"containerScroll"==i?(b=K.scrollTop(),n=K.scrollLeft()):"init"!=i&&(k=l.scrollTop(),m=l.scrollLeft(),b=K.scrollTop(),n=K.scrollLeft()),!j||!(0>k||0>m)){if(T)t("windowScrollDone"==i?!0:!1);else if("windowScrollDone"==i)return null;g=B.offset(),N&&O&&(g.top+=d);var p,q,u=B.outerHeight();if(Q&&L){if(c>=b){var v=c-b;p=v>0?v:0}else p=R?0:b;q=h}else!Q&&L?(k>a+u+e?p=u-f+e:g.top>k+E?(p=0,s()):(p=E+k-g.top+c+(O?d:0),r()),q=0):Q&&!L?(c>b||b-c>u?(p=g.top-k,s()):(p=g.top+b-k-c,r()),q=g.left+n-m):Q||L||(k>a+u+e?p=u+E-k+a+e:g.top>k+E?(p=g.top-k,r()):p=E,q=g.left-m);return{top:p,left:q}}}}function y(){var a=null,b=null,c=null;return function(d,e,f){null==d||a==d.top&&b==d.left||(Z.css({top:d.top,left:d.left}),a=d.top,b=d.left),e&&n(),f&&i();var g=K.scrollLeft();L&&c==g||(Z.scrollLeft(g),c=g)}}function z(){if(K.length){var a=K.width(),b=K.height(),c=B.height(),d=B.width(),e=d>a?I:0,f=c>b?I:0;H.horizontal=d>a-f?I:0,H.vertical=c>b-e?I:0}}var A=f.uniqueId(),B=a(this);if(B.data("floatThead-attached"))return!0;if(!B.is("table"))throw new Error('jQuery.floatThead must be run on a table element. ex: $("table").floatThead();');g=p.autoReflow&&g;var C=B.find("thead:first"),D=B.find("tbody:first");if(0==C.length)throw new Error("jQuery.floatThead must be run on a table that contains a <thead> element");var E,F,G=!1,H={vertical:0,horizontal:0},I=d(),J=0,K=p.scrollContainer(B)||a([]),L=p.useAbsolutePositioning;null==L&&(L=p.scrollContainer(B).length),L||(G=!0);var M=B.find("caption"),N=1==M.length;if(N)var O="top"===(M.css("caption-side")||M.attr("align")||"top");var P=a('<fthfoot style="display:table-footer-group;border-spacing:0;height:0;border-collapse:collapse;"/>'),Q=K.length>0,R=!1,S=a([]),T=9>=h&&!Q&&L,U=a("<table/>"),V=a("<colgroup/>"),W=B.find("colgroup:first"),X=!0;0==W.length&&(W=a("<colgroup/>"),X=!1);var Y=a('<fthrow style="display:table-row;border-spacing:0;height:0;border-collapse:collapse"/>'),Z=a('<div style="overflow: hidden;" aria-hidden="true"></div>'),$=!1,_=a("<thead/>"),ab=a('<tr class="size-row"/>'),bb=a([]),cb=a([]),db=a([]),eb=a([]);_.append(ab),B.prepend(W),k&&(P.append(Y),B.append(P)),U.append(V),Z.append(U),p.copyTableClass&&U.attr("class",B.attr("class")),U.attr({cellpadding:B.attr("cellpadding"),cellspacing:B.attr("cellspacing"),border:B.attr("border")});var fb=B.css("display");if(U.css({borderCollapse:B.css("borderCollapse"),border:B.css("border"),display:fb}),"none"==fb&&($=!0),U.addClass(p.floatTableClass).css("margin",0),L){var gb=function(a,b){var c=a.css("position"),d="relative"==c||"absolute"==c;if(!d||b){var e={paddingLeft:a.css("paddingLeft"),paddingRight:a.css("paddingRight")};Z.css(e),a=a.wrap("<div class='"+p.floatWrapperClass+"' style='position: relative; clear:both;'></div>").parent(),R=!0}return a};Q?(S=gb(K,!0),S.append(Z)):(S=gb(B),B.after(Z))}else B.after(Z);Z.css({position:L?"absolute":"fixed",marginTop:0,top:L?0:"auto",zIndex:p.zIndex}),Z.addClass(p.floatContainerClass),o();var hb={"table-layout":"fixed"},ib={"table-layout":B.css("tableLayout")||"auto"},jb=B[0].style.width||"",kb=B.css("minWidth")||"";z();var lb,mb=function(){(lb=v())()};mb();var nb=x(),ob=y();ob(nb("init"),!0);var pb=f.debounce(function(){ob(nb("windowScrollDone"),!1)},300),qb=function(){ob(nb("windowScroll"),!1),pb()},rb=function(){ob(nb("containerScroll"),!1)},sb=function(){o(),z(),mb(),nb=x(),(ob=y())(nb("resize"),!0,!0)},tb=f.debounce(function(){z(),o(),mb(),nb=x(),ob(nb("reflow"),!0)},1);if(Q?L?K.on(c("scroll"),rb):(K.on(c("scroll"),rb),l.on(c("scroll"),qb)):l.on(c("scroll"),qb),l.on(c("load"),tb),b(p.debounceResizeMs,c("resize"),sb),B.on("reflow",tb),e(B)&&B.on("filter",tb).on("sort",tb).on("page",tb),g){var ub=K.length?K[0]:B[0];m=new MutationObserver(function(a){for(var b=function(a){return a&&a[0]&&"THEAD"==a[0].nodeName},c=0;c<a.length;c++)if(!b(a[c].addedNodes)&&!b(a[c].removedNodes)){tb();break}}),m.observe(ub,{childList:!0,subtree:!0})}B.data("floatThead-attached",{destroy:function(){var a=".fth-"+A;s(),B.css(ib),W.remove(),k&&P.remove(),_.parent().length&&_.replaceWith(C),g&&(m.disconnect(),m=null),B.off("reflow"),K.off(a),R&&(K.length?K.unwrap():B.unwrap()),B.css("minWidth",kb),Z.remove(),B.data("floatThead-attached",!1),l.off(a)},reflow:function(){tb()},setHeaderHeight:function(){i()},getFloatContainer:function(){return Z},getRowGroups:function(){return G?Z.find("thead").add(B.find("tbody,tfoot")):B.find("thead,tbody,tfoot")}})}),this}}(jQuery),function(a){a.floatThead=a.floatThead||{},a.floatThead._=window._||function(){var b={},c=Object.prototype.hasOwnProperty,d=["Arguments","Function","String","Number","Date","RegExp"];b.has=function(a,b){return c.call(a,b)},b.keys=function(a){if(a!==Object(a))throw new TypeError("Invalid object");var c=[];for(var d in a)b.has(a,d)&&c.push(d);return c};var e=0;return b.uniqueId=function(a){var b=++e+"";return a?a+b:b},a.each(d,function(){var a=this;b["is"+a]=function(b){return Object.prototype.toString.call(b)=="[object "+a+"]"}}),b.debounce=function(a,b,c){var d,e,f,g,h;return function(){f=this,e=arguments,g=new Date;var i=function(){var j=new Date-g;b>j?d=setTimeout(i,b-j):(d=null,c||(h=a.apply(f,e)))},j=c&&!d;return d||(d=setTimeout(i,b)),j&&(h=a.apply(f,e)),h}},b}()}(jQuery);
+!function(a){function b(a,b,c){if(8==j){var d=o.width(),e=h.debounce(function(){var a=o.width();d!=a&&(d=a,c())},a);o.on(b,e)}else o.on(b,h.debounce(c,a))}function c(a){window&&window.console&&window.console.log&&window.console.log("jQuery.floatThead: "+a)}function d(a){var b=a.getBoundingClientRect();return b.width||b.right-b.left}function e(){var b=a('<div style="width:50px;height:50px;overflow-y:scroll;position:absolute;top:-200px;left:-200px;"><div style="height:100px;width:100%"></div>');a("body").append(b);var c=b.innerWidth(),d=a("div",b).innerWidth();return b.remove(),c-d}function f(a){if(a.dataTableSettings)for(var b=0;b<a.dataTableSettings.length;b++){var c=a.dataTableSettings[b].nTable;if(a[0]==c)return!0}return!1}function g(a,b,c){var d=c?"outerWidth":"width";if(m&&a.css("max-width")){var e=0;c&&(e+=parseInt(a.css("borderLeft"),10),e+=parseInt(a.css("borderRight"),10));for(var f=0;f<b.length;f++)e+=b.get(f).offsetWidth;return e}return a[d]()}a.floatThead=a.floatThead||{},a.floatThead.defaults={cellTag:null,headerCellSelector:"tr:visible:first>*:visible",zIndex:1001,debounceResizeMs:10,useAbsolutePositioning:!0,scrollingTop:0,scrollingBottom:0,scrollContainer:function(){return a([])},getSizingRow:function(a){return a.find("tbody tr:visible:first>*:visible")},floatTableClass:"floatThead-table",floatWrapperClass:"floatThead-wrapper",floatContainerClass:"floatThead-container",copyTableClass:!0,enableAria:!1,autoReflow:!1,debug:!1};var h=window._,i="undefined"!=typeof MutationObserver,j=function(){for(var a=3,b=document.createElement("b"),c=b.all||[];a=1+a,b.innerHTML="<!--[if gt IE "+a+"]><i><![endif]-->",c[0];);return a>4?a:document.documentMode}(),k=/Gecko\//.test(navigator.userAgent),l=/WebKit\//.test(navigator.userAgent),m=function(){if(l){var b=a('<div style="width:0px"><table style="max-width:100%"><tr><th><div style="min-width:100px;">X</div></th></tr></table></div>');a("body").append(b);var c=0==b.find("table").width();return b.remove(),c}return!1},n=!k&&!j,o=a(window);a.fn.floatThead=function(k){if(k=k||{},!h&&(h=window._||a.floatThead._,!h))throw new Error("jquery.floatThead-slim.js requires underscore. You should use the non-lite version since you do not have underscore.");if(8>j)return this;var p=null;if(h.isFunction(m)&&(m=m()),h.isString(k)){var q=k,r=this;return this.filter("table").each(function(){var b=a(this),c=b.data("floatThead-lazy");c&&b.floatThead(c);var d=b.data("floatThead-attached");if(d&&h.isFunction(d[q])){var e=d[q]();"undefined"!=typeof e&&(r=e)}}),r}var s=a.extend({},a.floatThead.defaults||{},k);if(a.each(k,function(b){b in a.floatThead.defaults||!s.debug||c("Used ["+b+"] key to init plugin, but that param is not an option for the plugin. Valid options are: "+h.keys(a.floatThead.defaults).join(", "))}),s.debug){var t=a.fn.jquery.split(".");1==parseInt(t[0],10)&&parseInt(t[1],10)<=7&&c("jQuery version "+a.fn.jquery+" detected! This plugin supports 1.8 or better, or 1.7.x with jQuery UI 1.8.24 -> http://jqueryui.com/resources/download/jquery-ui-1.8.24.zip")}return this.filter(":not(."+s.floatTableClass+")").each(function(){function c(a){return a+".fth-"+D+".floatTHead"}function k(){var b=0;if(F.children("tr:visible").each(function(){b+=a(this).outerHeight(!0)}),"collapse"==E.css("border-collapse")){var c=parseInt(E.css("border-top-width"),10),d=parseInt(E.find("thead tr:first").find(">*:first").css("border-top-width"),10);c>d&&(b-=c/2)}db.outerHeight(b),eb.outerHeight(b)}function m(){var a=g(E,hb,!0),b=N.width()||a,c="hidden"!=N.css("overflow-y")?b-K.vertical:b;if(ab.width(c),O){var d=100*a/c;X.css("width",d+"%")}else X.outerWidth(a)}function q(){H=(h.isFunction(s.scrollingTop)?s.scrollingTop(E):s.scrollingTop)||0,I=(h.isFunction(s.scrollingBottom)?s.scrollingBottom(E):s.scrollingBottom)||0}function r(){var b,c;if($)b=Z.find("col").length;else{var d;if(d=null==s.cellTag&&s.headerCellSelector?s.headerCellSelector:"tr:first>"+s.cellTag,h.isNumber(d))return d;c=F.find(d),b=0,c.each(function(){b+=parseInt(a(this).attr("colspan")||1,10)})}if(b!=M){M=b;for(var e,f=[],g=[],i=[],j=0;b>j;j++)f.push(s.enableAria&&(e=c.eq(j).text())?'<th scope="col" class="floatThead-col">'+e+"</th>":'<th class="floatThead-col"/>'),g.push("<col/>"),i.push("<fthtd style='display:table-cell;height:0;width:auto;'/>");g=g.join(""),f=f.join(""),n&&(i=i.join(""),_.html(i),hb=_.find("fthtd")),db.html(f),eb=db.find("th"),$||Z.html(g),fb=Z.find("col"),Y.html(g),gb=Y.find("col")}return b}function t(){if(!J){if(J=!0,P){var a=g(E,hb,!0),b=V.width();a>b&&E.css("minWidth",a)}E.css(kb),X.css(kb),X.append(F),G.before(cb),k()}}function u(){J&&(J=!1,P&&E.width(mb),cb.detach(),E.prepend(F),E.css(lb),X.css(lb),E.css("minWidth",nb),E.css("minWidth",g(E,hb)))}function v(a){ob!=a&&(ob=a,E.triggerHandler("floatThead",[a,ab]))}function w(a){P!=a&&(P=a,ab.css({position:P?"absolute":"fixed"}))}function x(a,b,c,d){return n?c:d?s.getSizingRow(a,b,c):b}function y(){var a,b=r();return function(){fb=Z.find("col");var c=x(E,fb,hb,j);if(c.length==b&&b>0){if(!$)for(a=0;b>a;a++)fb.eq(a).css("width","");u();var e=[];for(a=0;b>a;a++)e[a]=d(c.get(a));for(a=0;b>a;a++)gb.eq(a).width(e[a]),fb.eq(a).width(e[a]);t()}else X.append(F),E.css(lb),X.css(lb),k()}}function z(a){var b=N.css("border-"+a+"-width"),c=0;return b&&~b.indexOf("px")&&(c=parseInt(b,10)),c}function A(){var a,b=N.scrollTop(),c=0,d=R?Q.outerHeight(!0):0,e=S?d:-d,f=ab.height(),g=E.offset(),h=0,i=0;if(O){var j=N.offset();c=g.top-j.top+b,R&&S&&(c+=d),h=z("left"),i=z("top"),c-=i}else a=g.top-H-f+I+K.horizontal;var k=o.scrollTop(),m=o.scrollLeft(),n=N.scrollLeft();return function(j){var p=E[0].offsetWidth<=0&&E[0].offsetHeight<=0;if(!p&&bb)return bb=!1,setTimeout(function(){E.triggerHandler("reflow")},1),null;if(p&&(bb=!0,!P))return null;if("windowScroll"==j?(k=o.scrollTop(),m=o.scrollLeft()):"containerScroll"==j?(b=N.scrollTop(),n=N.scrollLeft()):"init"!=j&&(k=o.scrollTop(),m=o.scrollLeft(),b=N.scrollTop(),n=N.scrollLeft()),!l||!(0>k||0>m)){if(W)w("windowScrollDone"==j?!0:!1);else if("windowScrollDone"==j)return null;g=E.offset(),R&&S&&(g.top+=d);var q,r,s=E.outerHeight();if(O&&P){if(c>=b){var x=c-b+i;q=x>0?x:0,v(!1)}else q=U?i:b,v(!0);r=h}else!O&&P?(k>a+s+e?q=s-f+e:g.top>=k+H?(q=0,u(),v(!1)):(q=H+k-g.top+c+(S?d:0),t(),v(!0)),r=0):O&&!P?(c>b||b-c>s?(q=g.top-k,u(),v(!1)):(q=g.top+b-k-c,t(),v(!0)),r=g.left+n-m):O||P||(k>a+s+e?q=s+H-k+a+e:g.top>k+H?(q=g.top-k,t(),v(!1)):(q=H,v(!0)),r=g.left-m);return{top:q,left:r}}}}function B(){var a=null,b=null,c=null;return function(d,e,f){null==d||a==d.top&&b==d.left||(ab.css({top:d.top,left:d.left}),a=d.top,b=d.left),e&&m(),f&&k();var g=N.scrollLeft();P&&c==g||(ab.scrollLeft(g),c=g)}}function C(){if(N.length)if(N.data().perfectScrollbar)K={horizontal:0,vertical:0};else{var a=N.width(),b=N.height(),c=E.height(),d=g(E,hb),e=d>a?L:0,f=c>b?L:0;K.horizontal=d>a-f?L:0,K.vertical=c>b-e?L:0}}var D=h.uniqueId(),E=a(this);if(E.data("floatThead-attached"))return!0;if(!E.is("table"))throw new Error('jQuery.floatThead must be run on a table element. ex: $("table").floatThead();');i=s.autoReflow&&i;var F=E.children("thead:first"),G=E.children("tbody:first");if(0==F.length||0==G.length)return E.data("floatThead-lazy",s),void E.one("reflow",function(){E.floatThead(s)});E.data("floatThead-lazy")&&E.unbind("reflow"),E.data("floatThead-lazy",!1);var H,I,J=!1,K={vertical:0,horizontal:0},L=e(),M=0,N=s.scrollContainer(E)||a([]),O=N.length>0,P=s.useAbsolutePositioning;null==P&&(P=O),P||(J=!0);var Q=E.find("caption"),R=1==Q.length;if(R)var S="top"===(Q.css("caption-side")||Q.attr("align")||"top");var T=a('<fthfoot style="display:table-footer-group;border-spacing:0;height:0;border-collapse:collapse;"/>'),U=!1,V=a([]),W=9>=j&&!O&&P,X=a("<table/>"),Y=a("<colgroup/>"),Z=E.children("colgroup:first"),$=!0;0==Z.length&&(Z=a("<colgroup/>"),$=!1);var _=a('<fthtr style="display:table-row;border-spacing:0;height:0;border-collapse:collapse"/>'),ab=a('<div style="overflow: hidden;" aria-hidden="true" class="floatThead-floatContainer"></div>'),bb=!1,cb=a("<thead/>"),db=a('<tr class="size-row"/>'),eb=a([]),fb=a([]),gb=a([]),hb=a([]);cb.append(db),E.prepend(Z),n&&(T.append(_),E.append(T)),X.append(Y),ab.append(X),s.copyTableClass&&X.attr("class",E.attr("class")),X.attr({cellpadding:E.attr("cellpadding"),cellspacing:E.attr("cellspacing"),border:E.attr("border")});var ib=E.css("display");if(X.css({borderCollapse:E.css("borderCollapse"),border:E.css("border"),display:ib}),"none"==ib&&(bb=!0),X.addClass(s.floatTableClass).css({margin:0,"border-bottom-width":0}),P){var jb=function(a,b){var c=a.css("position"),d="relative"==c||"absolute"==c;if(!d||b){var e={paddingLeft:a.css("paddingLeft"),paddingRight:a.css("paddingRight")};ab.css(e),a=a.wrap("<div class='"+s.floatWrapperClass+"' style='position: relative; clear:both;'></div>").parent(),U=!0}return a};O?(V=jb(N,!0),V.append(ab)):(V=jb(E),E.after(ab))}else E.after(ab);ab.css({position:P?"absolute":"fixed",marginTop:0,top:P?0:"auto",zIndex:s.zIndex}),ab.addClass(s.floatContainerClass),q();var kb={"table-layout":"fixed"},lb={"table-layout":E.css("tableLayout")||"auto"},mb=E[0].style.width||"",nb=E.css("minWidth")||"",ob=!1;C();var pb,qb=function(){(pb=y())()};qb();var rb=A(),sb=B();sb(rb("init"),!0);var tb=h.debounce(function(){sb(rb("windowScrollDone"),!1)},1),ub=function(){sb(rb("windowScroll"),!1),W&&tb()},vb=function(){sb(rb("containerScroll"),!1)},wb=function(){q(),C(),qb(),rb=A(),(sb=B())(rb("resize"),!0,!0)},xb=h.debounce(function(){C(),q(),qb(),rb=A(),sb(rb("reflow"),!0)},1);if(O?P?N.on(c("scroll"),vb):(N.on(c("scroll"),vb),o.on(c("scroll"),ub)):o.on(c("scroll"),ub),o.on(c("load"),xb),b(s.debounceResizeMs,c("resize"),wb),E.on("reflow",xb),f(E)&&E.on("filter",xb).on("sort",xb).on("page",xb),i){var yb=N.length?N[0]:E[0];p=new MutationObserver(function(a){for(var b=function(a){return a&&a[0]&&"THEAD"==a[0].nodeName},c=0;c<a.length;c++)if(!b(a[c].addedNodes)&&!b(a[c].removedNodes)){xb();break}}),p.observe(yb,{childList:!0,subtree:!0})}E.data("floatThead-attached",{destroy:function(){var a=".fth-"+D;u(),E.css(lb),Z.remove(),n&&T.remove(),cb.parent().length&&cb.replaceWith(F),i&&(p.disconnect(),p=null),E.off("reflow"),N.off(a),U&&(N.length?N.unwrap():E.unwrap()),E.css("minWidth",nb),ab.remove(),E.data("floatThead-attached",!1),o.off(a)},reflow:function(){xb()},setHeaderHeight:function(){k()},getFloatContainer:function(){return ab},getRowGroups:function(){return J?ab.children("thead").add(E.children("tbody,tfoot")):E.children("thead,tbody,tfoot")}})}),this}}(jQuery),function(a){a.floatThead=a.floatThead||{},a.floatThead._=window._||function(){var b={},c=Object.prototype.hasOwnProperty,d=["Arguments","Function","String","Number","Date","RegExp"];b.has=function(a,b){return c.call(a,b)},b.keys=function(a){if(a!==Object(a))throw new TypeError("Invalid object");var c=[];for(var d in a)b.has(a,d)&&c.push(d);return c};var e=0;return b.uniqueId=function(a){var b=++e+"";return a?a+b:b},a.each(d,function(){var a=this;b["is"+a]=function(b){return Object.prototype.toString.call(b)=="[object "+a+"]"}}),b.debounce=function(a,b,c){var d,e,f,g,h;return function(){f=this,e=arguments,g=new Date;var i=function(){var j=new Date-g;b>j?d=setTimeout(i,b-j):(d=null,c||(h=a.apply(f,e)))},j=c&&!d;return d||(d=setTimeout(i,b)),j&&(h=a.apply(f,e)),h}},b}()}(jQuery);

jquery.floatThead.js

@@ -1,2 +0,2 @@
-// @preserve jQuery.floatThead 1.2.10 - http://mkoryak.github.io/floatThead/ - Copyright (c) 2012 - 2014 Misha Koryak
+// @preserve jQuery.floatThead 1.2.12 - http://mkoryak.github.io/floatThead/ - Copyright (c) 2012 - 2015 Misha Koryak
 // @license MIT
@@ -23,5 +23,5 @@
     cellTag: null, // DEPRECATED - use headerCellSelector instead
-    headerCellSelector: 'tr:first>th:visible', //thead cells are this.
+    headerCellSelector: 'tr:visible:first>*:visible', //thead cells are this.
     zIndex: 1001, //zindex of the floating thead (actually a container div)
-    debounceResizeMs: 10,
+    debounceResizeMs: 10, //Deprecated!
     useAbsolutePositioning: true, //if set to NULL - defaults: has scrollContainer=true, doesn't have scrollContainer=false
@@ -34,3 +34,3 @@ scrollingTop: 0, //String or function($table) - offset from top of window where the header should not pass above
     getSizingRow: function($table, $cols, $fthCells){ // this is only called when using IE,
-      // override it if the first row of the table is going to contain colgroups (any cell spans greater then one col)
+      // override it if the first row of the table is going to contain colgroups (any cell spans greater than one col)
       // it should return a jquery object containing a wrapped set of table cells comprising a row that contains no col spans and is visible
@@ -44,3 +44,3 @@ return $table.find('tbody tr:visible:first>*:visible');
     enableAria: false, //will copy header text from the floated header back into the table for screen readers. Might cause the css styling to be off. beware!
-    autoReflow: false, //(undocumeted) - use MutationObserver api to reflow automatically when internal table DOM changes
+    autoReflow: false, //(undocumented) - use MutationObserver api to reflow automatically when internal table DOM changes
     debug: false //print possible issues (that don't prevent script loading) to console, if console exists.
@@ -59,2 +59,14 @@ };
 
+  //safari 7 (and perhaps others) reports table width to be parent container's width if max-width is set on table. see: https://github.com/mkoryak/floatThead/issues/108
+  var isTableWidthBug = function(){
+    if(isWebkit) {
+      var $test = $('<div style="width:0px"><table style="max-width:100%"><tr><th><div style="min-width:100px;">X</div></th></tr></table></div>');
+      $("body").append($test);
+      var ret = ($test.find("table").width() == 0);
+      $test.remove();
+      return ret;
+    }
+    return false;
+  };
+
   var createElements = !isFF && !ieVersion; //FF can read width from <col> elements, but webkit cannot
@@ -86,5 +98,11 @@
   function debug(str){
-    window.console && window.console && window.console.log && window.console.log(str);
+    window && window.console && window.console.log && window.console.log("jQuery.floatThead: " + str);
   }
 
+  //returns fractional pixel widths
+  function getOffsetWidth(el) {
+    var rect = el.getBoundingClientRect();
+    return rect.width || rect.right - rect.left;
+  }
+
   /**
@@ -122,2 +140,20 @@ * try to calculate the scrollbar width for your browser/os
   }
+
+  function tableWidth($table, $fthCells, isOuter){
+    // see: https://github.com/mkoryak/floatThead/issues/108
+    var fn = isOuter ? "outerWidth": "width";
+    if(isTableWidthBug && $table.css("max-width")){
+      var w = 0;
+      if(isOuter) {
+        w += parseInt($table.css("borderLeft"), 10);
+        w += parseInt($table.css("borderRight"), 10);
+      }
+      for(var i=0; i < $fthCells.length; i++){
+        w += $fthCells.get(i).offsetWidth;
+      }
+      return w;
+    } else {
+      return $table[fn]();
+    }
+  }
   $.fn.floatThead = function(map){
@@ -136,10 +172,8 @@ map = map || {};
 
-    if(createElements){ //make sure this is done only once no matter how many times you call the plugin fn
-        //because chrome cant read <col> width, these elements are used for sizing the table. Need to create new elements because they must be unstyled by user's css.
-        document.createElement('fthtr'); //tr
-        document.createElement('fthtd'); //td
-        document.createElement('fthfoot'); //tfoot
-    }
     var mObs = null; //mutation observer lives in here if we can use it / make it
 
+    if(util.isFunction(isTableWidthBug)) {
+      isTableWidthBug = isTableWidthBug();
+    }
+
     if(util.isString(map)){
@@ -149,3 +183,8 @@ var command = map;
       this.filter('table').each(function(){
-        var obj = $(this).data('floatThead-attached');
+        var $this = $(this);
+        var opts = $this.data('floatThead-lazy');
+        if(opts){
+          $this.floatThead(opts);
+        }
+        var obj = $this.data('floatThead-attached');
         if(obj && util.isFunction(obj[command])){
@@ -164,5 +203,11 @@ var r = obj[command]();
       if((!(key in $.floatThead.defaults)) && opts.debug){
-        debug("jQuery.floatThead: used ["+key+"] key to init plugin, but that param is not an option for the plugin. Valid options are: "+ (util.keys($.floatThead.defaults)).join(', '));
+        debug("Used ["+key+"] key to init plugin, but that param is not an option for the plugin. Valid options are: "+ (util.keys($.floatThead.defaults)).join(', '));
       }
     });
+    if(opts.debug){
+      var v = $.fn.jquery.split(".");
+      if(parseInt(v[0], 10) == 1 && parseInt(v[1], 10) <= 7){
+        debug("jQuery version "+$.fn.jquery+" detected! This plugin supports 1.8 or better, or 1.7.x with jQuery UI 1.8.24 -> http://jqueryui.com/resources/download/jquery-ui-1.8.24.zip")
+      }
+    }
 
@@ -179,7 +224,16 @@ this.filter(':not(.'+opts.floatTableClass+')').each(function(){
       canObserveMutations = opts.autoReflow && canObserveMutations; //option defaults to false!
-      var $header = $table.find('thead:first');
-      var $tbody = $table.find('tbody:first');
-      if($header.length == 0){
-        throw new Error('jQuery.floatThead must be run on a table that contains a <thead> element');
+      var $header = $table.children('thead:first');
+      var $tbody = $table.children('tbody:first');
+      if($header.length == 0 || $tbody.length == 0){
+        $table.data('floatThead-lazy', opts);
+        $table.one('reflow', function(){
+          $table.floatThead(opts);
+        });
+        return;
       }
+      if($table.data('floatThead-lazy')){
+        $table.unbind("reflow");
+      }
+      $table.data('floatThead-lazy', false);
+
       var headerFloated = false;
@@ -191,6 +245,7 @@ var scrollingTop, scrollingBottom;
       var $scrollContainer = opts.scrollContainer($table) || $([]); //guard against returned nulls
+      var locked = $scrollContainer.length > 0;
 
       var useAbsolutePositioning = opts.useAbsolutePositioning;
       if(useAbsolutePositioning == null){ //defaults: locked=true, !locked=false
-        useAbsolutePositioning = opts.scrollContainer($table).length;
+        useAbsolutePositioning = locked;
       }
@@ -208,9 +263,8 @@ if(!useAbsolutePositioning){
 
-      var locked = $scrollContainer.length > 0;
       var wrappedContainer = false; //used with absolute positioning enabled. did we need to wrap the scrollContainer/table with a relative div?
       var $wrapper = $([]); //used when absolute positioning enabled - wraps the table and the float container
-      var absoluteToFixedOnScroll = ieVersion <= 9 && !locked && useAbsolutePositioning; //on ie using absolute positioning doesnt look good with window scrolling, so we change positon to fixed on scroll, and then change it back to absolute when done.
+      var absoluteToFixedOnScroll = ieVersion <= 9 && !locked && useAbsolutePositioning; //on IE using absolute positioning doesn't look good with window scrolling, so we change position to fixed on scroll, and then change it back to absolute when done.
       var $floatTable = $("<table/>");
       var $floatColGroup = $("<colgroup/>");
-      var $tableColGroup = $table.find('colgroup:first');
+      var $tableColGroup = $table.children('colgroup:first');
       var existingColGroup = true;
@@ -221,4 +275,4 @@ if($tableColGroup.length == 0){
       }
-      var $fthRow = $('<fthrow style="display:table-row;border-spacing:0;height:0;border-collapse:collapse"/>'); //created unstyled elements
-      var $floatContainer = $('<div style="overflow: hidden;" aria-hidden="true"></div>');
+      var $fthRow = $('<fthtr style="display:table-row;border-spacing:0;height:0;border-collapse:collapse"/>'); //created unstyled elements (used for sizing the table because chrome can't read <col> width)
+      var $floatContainer = $('<div style="overflow: hidden;" aria-hidden="true" class="floatThead-floatContainer"></div>');
       var floatTableHidden = false; //this happens when the table is hidden and we do magic when making it visible
@@ -244,3 +298,3 @@ var $newHeader = $("<thead/>");
       }
-      $floatTable.attr({ //copy over some deprecated table attributes that people still like to use. Good thing poeple dont use colgroups...
+      $floatTable.attr({ //copy over some deprecated table attributes that people still like to use. Good thing people don't use colgroups...
         'cellpadding': $table.attr('cellpadding'),
@@ -260,3 +314,3 @@ 'cellspacing': $table.attr('cellspacing'),
 
-      $floatTable.addClass(opts.floatTableClass).css('margin', 0); //must have no margins or you wont be able to click on things under floating table
+      $floatTable.addClass(opts.floatTableClass).css({'margin': 0, 'border-bottom-width': 0}); //must have no margins or you won't be able to click on things under floating table
 
@@ -307,5 +361,12 @@ if(useAbsolutePositioning){
         var headerHeight = 0;
-        $header.find("tr:visible").each(function(){
+        $header.children("tr:visible").each(function(){
           headerHeight += $(this).outerHeight(true);
         });
+        if($table.css('border-collapse') == 'collapse') {
+          var tableBorderTopHeight = parseInt($table.css('border-top-width'), 10);
+          var cellBorderTopHeight = parseInt($table.find("thead tr:first").find(">*:first").css('border-top-width'), 10);
+          if(tableBorderTopHeight > cellBorderTopHeight) {
+            headerHeight -= (tableBorderTopHeight / 2); //id love to see some docs where this magic recipe is found..
+          }
+        }
         $sizerRow.outerHeight(headerHeight);
@@ -317,11 +378,11 @@ $sizerCells.outerHeight(headerHeight);
       function setFloatWidth(){
-        var tableWidth = $table.outerWidth();
-        var width = $scrollContainer.width() || tableWidth;
+        var tw = tableWidth($table, $fthCells, true);
+        var width = $scrollContainer.width() || tw;
         var floatContainerWidth = $scrollContainer.css("overflow-y") != 'hidden' ? width - scrollbarOffset.vertical : width;
         $floatContainer.width(floatContainerWidth);
         if(locked){
-          var percent = 100 * tableWidth / (floatContainerWidth);
+          var percent = 100 * tw / (floatContainerWidth);
           $floatTable.css('width', percent+'%');
         } else {
-          $floatTable.outerWidth(tableWidth);
+          $floatTable.outerWidth(tw);
         }
@@ -336,3 +397,3 @@ }
       /**
-       * get the number of columns and also rebuild resizer rows if the count is different then the last count
+       * get the number of columns and also rebuild resizer rows if the count is different than the last count
        */
@@ -351,3 +412,3 @@ function columnNum(){
           if(util.isNumber(selector)){
-            //its actually a row count.
+            //it's actually a row count. (undocumented, might be removed!)
             return selector;
@@ -400,6 +461,6 @@ }
           if(useAbsolutePositioning){ //#53, #56
-            var tableWidth = $table.width();
+            var tw = tableWidth($table, $fthCells, true);
             var wrapperWidth = $wrapper.width();
-            if(tableWidth > wrapperWidth){
-              $table.css('minWidth', tableWidth);
+            if(tw > wrapperWidth){
+              $table.css('minWidth', tw);
             }
@@ -424,6 +485,14 @@ }
           $floatTable.css(layoutAuto);
-          $table.css('minWidth', originalTableMinWidth); //this looks weird, but its not a bug. Think about it!!
-          $table.css('minWidth', $table.width()); //#121
+          $table.css('minWidth', originalTableMinWidth); //this looks weird, but it's not a bug. Think about it!!
+          $table.css('minWidth', tableWidth($table, $fthCells)); //#121
         }
       }
+      var isHeaderFloatingLogical = false; //for the purpose of this event, the header is/isnt floating, even though the element
+                                           //might be in some other state. this is what the header looks like to the user
+      function triggerFloatEvent(isFloating){
+        if(isHeaderFloatingLogical != isFloating){
+          isHeaderFloatingLogical = isFloating;
+          $table.triggerHandler("floatThead", [isFloating, $floatContainer])
+        }
+      }
       function changePositioning(isAbsolute){
@@ -453,3 +522,3 @@ if(useAbsolutePositioning != isAbsolute){
         var i;
-        var numCols = columnNum(); //if the tables columns change dynamically since last time (datatables) we need to rebuild the sizer rows and get new count
+        var numCols = columnNum(); //if the tables columns changed dynamically since last time (datatables), rebuild the sizer rows and get a new count
 
@@ -469,3 +538,3 @@ return function(){
             for(i=0; i < numCols; i++){
-              widths[i] = $rowCells.get(i).offsetWidth;
+              widths[i] = getOffsetWidth($rowCells.get(i));
             }
@@ -502,3 +571,3 @@ for(i=0; i < numCols; i++){
 
-        //this floatEnd calc was moved out of the returned function because we assume the table height doesnt change (otherwise we must reinit by calling calculateFloatContainerPosFn)
+        //this floatEnd calc was moved out of the returned function because we assume the table height doesn't change (otherwise we must reinit by calling calculateFloatContainerPosFn)
         var floatEnd;
@@ -512,2 +581,3 @@ var tableContainerGap = 0;
         var tableLeftGap = 0; //can be caused by border on container (only in locked mode)
+        var tableTopGap = 0;
         if(locked){
@@ -519,4 +589,5 @@ var containerOffset = $scrollContainer.offset();
           }
-          tableContainerGap -= floatContainerBorderWidth('top');
           tableLeftGap = floatContainerBorderWidth('left');
+          tableTopGap = floatContainerBorderWidth('top');
+          tableContainerGap -= tableTopGap;
         } else {
@@ -528,6 +599,3 @@ floatEnd = tableOffset.top - scrollingTop - floatContainerHeight + scrollingBottom + scrollbarOffset.horizontal;
         var scrollContainerLeft =  $scrollContainer.scrollLeft();
-        scrollingContainerTop = $scrollContainer.scrollTop();
 
-
-
         return function(eventType){
@@ -538,7 +606,7 @@ var isTableHidden = $table[0].offsetWidth <= 0 && $table[0].offsetHeight <= 0;
             setTimeout(function(){
-              $table.trigger("reflow");
+              $table.triggerHandler("reflow");
             }, 1);
             return null;
           }
-          if(isTableHidden){ //its hidden
+          if(isTableHidden){ //it's hidden
             floatTableHidden = true;
@@ -585,7 +653,9 @@ if(!useAbsolutePositioning){
             if (tableContainerGap >= scrollingContainerTop) {
-              var gap = tableContainerGap - scrollingContainerTop;
+              var gap = tableContainerGap - scrollingContainerTop + tableTopGap;
               top = gap > 0 ? gap : 0;
+              triggerFloatEvent(false);
             } else {
-              top = wrappedContainer ? 0 : scrollingContainerTop;
+              top = wrappedContainer ? tableTopGap : scrollingContainerTop;
               //headers stop at the top of the viewport
+              triggerFloatEvent(true);
             }
@@ -596,8 +666,10 @@ left = tableLeftGap;
               top = tableHeight - floatContainerHeight + captionScrollOffset; //scrolled past table
-            } else if (tableOffset.top > windowTop + scrollingTop) {
+            } else if (tableOffset.top >= windowTop + scrollingTop) {
               top = 0; //scrolling to table
               unfloat();
+              triggerFloatEvent(false);
             } else {
               top = scrollingTop + windowTop - tableOffset.top + tableContainerGap + (captionAlignTop ? captionHeight : 0);
               refloat(); //scrolling within table. header floated
+              triggerFloatEvent(true);
             }
@@ -609,5 +681,7 @@ left =  0;
               unfloat();
+              triggerFloatEvent(false);
             } else {
               top = tableOffset.top + scrollingContainerTop  - windowTop - tableContainerGap;
               refloat();
+              triggerFloatEvent(true);
               //headers stop at the top of the viewport
@@ -623,2 +697,3 @@ }
               refloat();
+              triggerFloatEvent(false); //this is a weird case, the header never gets unfloated and i have no no way to know
               //scrolled past the top of the table
@@ -628,2 +703,3 @@ } else {
               top = scrollingTop;
+              triggerFloatEvent(true);
             }
@@ -671,7 +747,11 @@ left = tableOffset.left - windowLeft;
         if($scrollContainer.length){
-          var sw = $scrollContainer.width(), sh = $scrollContainer.height(), th = $table.height(), tw = $table.width();
-          var offseth = sw < tw ? scWidth : 0;
-          var offsetv = sh < th ? scWidth : 0;
-          scrollbarOffset.horizontal = sw - offsetv < tw ? scWidth : 0;
-          scrollbarOffset.vertical =  sh - offseth < th ? scWidth: 0;
+          if($scrollContainer.data().perfectScrollbar){
+            scrollbarOffset = {horizontal:0, vertical:0};
+          } else {
+            var sw = $scrollContainer.width(), sh = $scrollContainer.height(), th = $table.height(), tw = tableWidth($table, $fthCells);
+            var offseth = sw < tw ? scWidth : 0;
+            var offsetv = sh < th ? scWidth : 0;
+            scrollbarOffset.horizontal = sw - offsetv < tw ? scWidth : 0;
+            scrollbarOffset.vertical = sh - offseth < th ? scWidth : 0;
+          }
         }
@@ -698,7 +778,9 @@ }
         repositionFloatContainer(calculateFloatContainerPos('windowScrollDone'), false);
-      }, 300);
+      }, 1);
 
       var windowScrollEvent = function(){
         repositionFloatContainer(calculateFloatContainerPos('windowScroll'), false);
-        windowScrollDoneEvent();
+        if(absoluteToFixedOnScroll){
+          windowScrollDoneEvent();
+        }
       };
@@ -775,3 +857,3 @@ var containerScrollEvent = function(){
           createElements && $fthGrp.remove();
-          if($newHeader.parent().length){ //only if its in the dom
+          if($newHeader.parent().length){ //only if it's in the DOM
             $newHeader.replaceWith($header);
@@ -809,5 +891,5 @@ }
           if(headerFloated){
-            return $floatContainer.find("thead").add($table.find("tbody,tfoot"));
+            return $floatContainer.children("thead").add($table.children("tbody,tfoot"));
           } else {
-            return $table.find("thead,tbody,tfoot");
+            return $table.children("thead,tbody,tfoot");
           }
@@ -814,0 +896,0 @@ }

license.txt

 The MIT License (MIT)
 
-Copyright (c) 2014 Misha Koryak
+Copyright (c) 2012-2015 Misha Koryak
 
@@ -5,0 +5,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy

package.json

 {
   "name": "floatthead",
-  "version": "1.2.10",
+  "version": "1.2.13",
   "description": "fixed table header plugin that works",
-  "filename": "jquery.floatThead.js",
+  "main": "dist/jquery.floatThead.js",
   "dependencies": {},
@@ -7,0 +7,0 @@ "devDependencies": {

README.md

@@ -1,6 +0,8 @@
-jquery.floatThead v1.2.10
+jquery.floatThead v1.2.12
 =================
 
-Float the table header without special css. This plugin assumes nothing about your table markup and "just works" without losing your events or styles. Supports floating the header while scrolling within the window or while scrolling within a container with overflow. Plays nice with AngularJS and datatables. My cat loves it.
+Float the table header without special css. This plugin assumes nothing about your table markup and "just works" without losing your events or styles. Supports floating the header while scrolling within the window or while scrolling within a container with overflow. Plays nice with AngularJS and datatables and well written plugins.  
 
+:heart_eyes_cat:**My cat loves it**:heart_eyes_cat:
+
 Check out the demo / docs page for copious examples:
@@ -10,7 +12,33 @@
 
+###[Download](https://github.com/mkoryak/floatThead#download--install)
+```bash
+bower install floatThead
+```
 
-Jekyll templates to generate the docs are in the [gh-pages branch](https://github.com/mkoryak/floatThead/tree/gh-pages)
+![This is for the really lazy cats](http://giant.gfycat.com/AnyGloriousAlpaca.gif)
 
-[![Donate](http://programmingdrunk.com/donate-coffee.png)](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=SDJJ42BTC46LY&lc=US&item_name=floatThead&currency_code=USD&bn=PP%2dDonationsBF%3adonate%2dcoffee%2epng%3aNonHosted)
+Features:
+---------
+-   Floats the table header - it remains in viewport as you scroll
+-   Works on tables within a scrollable container or whole window scrolling
+-   Horizontal or vertical scrolling
+-   Doesn't clone the thead - so your events stay bound
+-   Doesn't mess with your styles
+-   Works on any table
+-   Requires no special css
+-   Works with [datatables](http://datatables.net) out of the box
+-   Screen reader support
+-   Plays nicely with angularjs
 
+
+What it does not do:
+---------
+-  Does not float the footer
+-  Does not let you lock the first column like in excel
+-  Safari **and mobile safari** is not fully supported. It might work, or it [might not](https://github.com/mkoryak/floatThead/issues/108), depending on your markup and safari version.  
+
+Common Pitfalls
+------
+If you use css and html best practices, this plugin will work. If you are stuck in 1999, you better [read this](http://mkoryak.github.io/floatThead/faq/).
+
 How to get help with the floatThead
@@ -21,3 +49,3 @@ ------------
  - Include the browser and operating system where you are having the problem. If its IE, a screenshot is also nice since I don't have quick access to that abomination.
- - Provide a jsfiddle that reproduces your issue in its simplest form possible. If its hard to read your code, you did it wrong.
+ - **Provide a jsfiddle that reproduces your issue in its simplest form possible**. If its hard to read your code, you did it wrong.
  - A description of the issue and steps to reproduce
@@ -27,7 +55,2 @@
  
-Feedback needed on planned features
-------------
-
-See: [https://github.com/mkoryak/floatThead/issues/30](https://github.com/mkoryak/floatThead/issues/30)
-
 Download / Install:
@@ -38,3 +61,3 @@ --------
   
-[Latest Release](https://github.com/mkoryak/floatThead/archive/v1.2.10.zip)
+[Latest Release](https://github.com/mkoryak/floatThead/archive/v1.2.12.zip)
 
@@ -68,16 +91,6 @@ Inside of that zip the following javascript files are of interest to you:
 ```
-  
-Features:
----------
+![npm](https://nodei.co/npm/floatthead.png)
 
--   Floats the table header - so that the user can always see it
--   Supports tables with inner scroll bars, or whole page scrolling
--   Horizontal or vertical scrolling
--   Doesn't clone the thead - so your events stay bound
--   Doesn't mess with your styles
--   Works on any table
--   Requires no special css
--   Works with [datatables](http://datatables.net) out of the box
--   Screen reader support
--   Plays nicely with angularjs
+### Webjar for Maven, Gradle, SBT
+https://github.com/webjars/floatThead
 
@@ -87,3 +100,2 @@ Requirements:
 
-
 -   jQuery 1.8.x or better (1.9 compliant) (or jQuery 1.7.x and jQuery UI core)
@@ -93,3 +105,3 @@
 -------------
--   IE8 or better
+-   IE8 or better (read [this](http://mkoryak.github.io/floatThead/examples/row-groups/))
 -   Modern browsers
@@ -121,2 +133,19 @@
 ----------
+### 1.2.12
+Huge thanks to [CoryDuncan](https://github.com/CoryDuncan), [ithielnor](https://github.com/ithielnor), [jurko-gospodnetic](https://github.com/jurko-gospodnetic) and [mhwlng](https://github.com/mhwlng) for your PRs
+
+- https://github.com/mkoryak/floatThead/pull/168 - support for fractional column widths (no more alignment issues!)
+- https://github.com/mkoryak/floatThead/pull/175 - having tables within tables wont cause weird issues
+- https://github.com/mkoryak/floatThead/issues/165 - Fire an event when the header is floated / unfloated
+- https://github.com/mkoryak/floatThead/issues/180 - no space outside of table causes it to always float 
+- https://github.com/mkoryak/floatThead/pull/185 - inner scrolling doesnt respect container border 
+- https://github.com/mkoryak/floatThead/issues/186 - can init on a table without thead and later add it
+- https://github.com/mkoryak/floatThead/issues/194 - header sizing takes into account border-collapse rules
+- bunch of code and stylistic cleanup 
+
+### 1.2.11
+- now supports perfect-scrollbar plugin
+- slightly better mobile safari support
+- fix bower.json
+
 ### 1.2.10
@@ -123,0 +152,0 @@ - play nicely with angularjs if it modifies the DOM behind the scenes

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 4 instances in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Copyleft License

License

(Experimental) Copyleft license information was found.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Non-permissive License

License

(Experimental) A license not known to be considered permissive was found.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3904892

increased by2806.29%

Number of package files

144

increased by928.57%

Lines of code

46742

increased by1934.03%

Number of lines in readme file

284

increased by11.37%

Worsened metrics

Number of low license alerts

4

increased byInfinity%

License quality

70

decreased by-30%

Number of low quality alerts

1

increased byInfinity%

Number of low supply chain risk alerts

2

increased byInfinity%

Number of medium supply chain risk alerts

5

increased byInfinity%

No dependency changes