experimental: use MutationObserver to auto reflow when needed

README.md

@@ -1,4 +1,4 @@
-jquery.floatThead v1.2.9
+jquery.floatThead v1.2.10
 =================
 
 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.
@@ -32,7 +32,7 @@ Download / Install:
 
 #### Download
 
-[Latest Release](https://github.com/mkoryak/floatThead/archive/v1.2.9.zip)
+[Latest Release](https://github.com/mkoryak/floatThead/archive/v1.2.10.zip)
 
 Inside of that zip the following javascript files are of interest to you:
 
@@ -73,6 +73,8 @@ Features:
 -   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
 
 Requirements:
 -------------
@@ -109,6 +111,14 @@ Watch for it.
 
 Change Log
 ----------
+### 1.2.10
+- play nicely with angularjs if it modifies the DOM behind the scenes
+- screen reader support via `enableAria` option 
+- https://github.com/mkoryak/floatThead/issues/122 - better default options for ie
+- https://github.com/mkoryak/floatThead/issues/121 - header layout bug
+- https://github.com/mkoryak/floatThead/issues/128 - issues with scrollbar size detection in certain layouts
+- https://github.com/mkoryak/floatThead/issues/127 - destroy not removing some elements
+
 ### 1.2.9
 - **Deprecated the `cellTag` option**, use `headerCellSelector` instead (see docs)
 - https://github.com/mkoryak/floatThead/issues/101 - **huge** performance improvement

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "jquery.floatThead",
-  "version": "1.2.9",
+  "version": "1.2.10",
   "homepage": "http://mkoryak.github.io/floatThead/",
   "authors": [
     "Misha Koryak"

dist/jquery.floatThead-slim.js

@@ -1,4 +1,4 @@
-// @preserve jQuery.floatThead 1.2.10dev - http://mkoryak.github.io/floatThead/ - Copyright (c) 2012 - 2014 Misha Koryak
+// @preserve jQuery.floatThead 1.2.10 - http://mkoryak.github.io/floatThead/ - Copyright (c) 2012 - 2014 Misha Koryak
 // @license MIT
 
 /* @author Misha Koryak
@@ -38,6 +38,8 @@
     floatWrapperClass: 'floatThead-wrapper',
     floatContainerClass: 'floatThead-container',
     copyTableClass: true, //copy 'class' attribute from table into the floated table so that the styles match.
+    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
     debug: false //print possible issues (that don't prevent script loading) to console, if console exists.
   };
 
@@ -164,6 +166,7 @@
       if(!$table.is('table')){
         throw new Error('jQuery.floatThead must be run on a table element. ex: $("table").floatThead();');
       }
+      canObserveMutations = opts.autoReflow && canObserveMutations; //option defaults to false!
       var $header = $table.find('thead:first');
       var $tbody = $table.find('tbody:first');
       if($header.length == 0){
@@ -204,7 +207,7 @@
         existingColGroup = false;
       }
       var $fthRow = $('<fthrow style="display:table-row;border-spacing:0;height:0;border-collapse:collapse"/>'); //created unstyled elements
-      var $floatContainer = $('<div style="overflow: hidden;"></div>');
+      var $floatContainer = $('<div style="overflow: hidden;" aria-hidden="true"></div>');
       var floatTableHidden = false; //this happens when the table is hidden and we do magic when making it visible
       var $newHeader = $("<thead/>");
       var $sizerRow = $('<tr class="size-row"/>');
@@ -340,7 +343,7 @@
           lastColumnCount = count;
           var cells = [], cols = [], psuedo = [], content;
           for(var x = 0; x < count; x++){
-            if ( content = $headerColumns.eq(x).text() ) {
+            if (opts.enableAria && (content = $headerColumns.eq(x).text()) ) {
               cells.push('<th scope="col" class="floatThead-col">' + content + '</th>');
             } else {
               cells.push('<th class="floatThead-col"/>');

dist/jquery.floatThead.js

@@ -1,4 +1,4 @@
-// @preserve jQuery.floatThead 1.2.10dev - http://mkoryak.github.io/floatThead/ - Copyright (c) 2012 - 2014 Misha Koryak
+// @preserve jQuery.floatThead 1.2.10 - http://mkoryak.github.io/floatThead/ - Copyright (c) 2012 - 2014 Misha Koryak
 // @license MIT
 
 /* @author Misha Koryak
@@ -38,6 +38,8 @@
     floatWrapperClass: 'floatThead-wrapper',
     floatContainerClass: 'floatThead-container',
     copyTableClass: true, //copy 'class' attribute from table into the floated table so that the styles match.
+    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
     debug: false //print possible issues (that don't prevent script loading) to console, if console exists.
   };
 
@@ -164,6 +166,7 @@
       if(!$table.is('table')){
         throw new Error('jQuery.floatThead must be run on a table element. ex: $("table").floatThead();');
       }
+      canObserveMutations = opts.autoReflow && canObserveMutations; //option defaults to false!
       var $header = $table.find('thead:first');
       var $tbody = $table.find('tbody:first');
       if($header.length == 0){
@@ -204,7 +207,7 @@
         existingColGroup = false;
       }
       var $fthRow = $('<fthrow style="display:table-row;border-spacing:0;height:0;border-collapse:collapse"/>'); //created unstyled elements
-      var $floatContainer = $('<div style="overflow: hidden;"></div>');
+      var $floatContainer = $('<div style="overflow: hidden;" aria-hidden="true"></div>');
       var floatTableHidden = false; //this happens when the table is hidden and we do magic when making it visible
       var $newHeader = $("<thead/>");
       var $sizerRow = $('<tr class="size-row"/>');
@@ -340,7 +343,7 @@
           lastColumnCount = count;
           var cells = [], cols = [], psuedo = [], content;
           for(var x = 0; x < count; x++){
-            if ( content = $headerColumns.eq(x).text() ) {
+            if (opts.enableAria && (content = $headerColumns.eq(x).text()) ) {
               cells.push('<th scope="col" class="floatThead-col">' + content + '</th>');
             } else {
               cells.push('<th class="floatThead-col"/>');
@@ -777,7 +780,6 @@
     return this;
   };
 })(jQuery);
-
 /* jQuery.floatThead.utils - http://mkoryak.github.io/floatThead/ - Copyright (c) 2012 - 2014 Misha Koryak
  * License: MIT
  *

jquery.floatThead.js

@@ -39,6 +39,7 @@
     floatContainerClass: 'floatThead-container',
     copyTableClass: true, //copy 'class' attribute from table into the floated table so that the styles match.
     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
     debug: false //print possible issues (that don't prevent script loading) to console, if console exists.
   };
 
@@ -165,6 +166,7 @@
       if(!$table.is('table')){
         throw new Error('jQuery.floatThead must be run on a table element. ex: $("table").floatThead();');
       }
+      canObserveMutations = opts.autoReflow && canObserveMutations; //option defaults to false!
       var $header = $table.find('thead:first');
       var $tbody = $table.find('tbody:first');
       if($header.length == 0){

package.json

@@ -1,6 +1,6 @@
 {
   "name": "floatthead",
-  "version": "1.2.9",
+  "version": "1.2.10",
   "description": "fixed table header plugin that works",
   "filename": "jquery.floatThead.js",
   "dependencies": {},