A jQuery plugin that makes the header of a table floating if the original header isn't visible due to scrolling. The plugin will automatically choose the thead tag as the header for a table. If thead isn't found it will search for rows marked with the class 'floating'. The behavior can be changed by the settings forceClass and markingClass.
News
2011-01-04
1.4.0!
Lazy loading of tables and performance optimations by Jason Axley
2010-08-02
1.3.0!
2010-07-08
1.2.0! Fixed a few bugs and added reinit and recalculate functions to the table.
2009-10-19
1.1.0! Better compatibility, better tested. There are still some problems with IE6 that i would like to have some help with.
2009-10-15
1.0.7 is out! With all fixes made by Vasilianskiy Sergey. I've also removed class marking of table rows. Also the plugin doesn't clone the whole table, just thead.
2009-10-07
1.0.6 is released with better compatibility with IE6/7. Big thanks to Glen for providing the patches!
2009-08-22
1.0.5 is released! Compatibility issues with IE7 and IE8 are still there but since i've limited access to Windows it will take some time to fix them.
2009-08-21
I've done some small changes and got the plugin to work with IE8 in all supported modes except (quirks mode). I will create a new release on jquery later today.
Usage
Just call floatHeader on a table in the page.
jQuery("#table").floatHeader(options);
Configuration options
An optional configuration dictionary can be passed to the plugin. Accepted options are:
| fadeOut | The length of the fade out animation in ms. Default: 250 |
| faceIn | The length of the face in animation in ms. Default: 250 |
| forceClass | Forces the plugin to use the marker class when searching for a header instead of thead. Default: false |
| floatClass | The class of the div that contains the floating header. The style should contain an appropriate z-index value. Default: 'floatHeader' |
| markerClass | The class name that is used for marking which rows that should be floating. Default: floating |
| cbFadeOut | A callback that is called when the floating header should be faded out. The method is called with the wrapped header as argument. |
| cbFadeIn | A callback that is called when the floating header should be faded in. The method is called with the wrapped header as argument. |
| recalculate | Recalculate the column width on every scroll event. |
Functions
The plugin defines two functions on the source table which can be called if the header is changed.
| fhRecalculate | Recalculated the column width of the floater. |
| fhInit | Recreates the floater from the source table header. |
$("#table").get(0).fhInit();
$("#table").get(0).fhRecalculate();
Known issues and bug reporting
Please use the issue tracker on the
project page at jquery.com to view and report bugs.
Acknowledgements
Just want to acknowledge a few people who have contributed to the development.
Diego Arbelaez - Contributed code to support resize events.
Stephen J. Fuhry - A test case for huge tables and testing of the horizontal-scroll-bug.
Glenn Gilbert - Compatibility for IE6/7
Vasilianskiy Sergey - Lots of jQuery fixes
Download and demo
Files can be downloaded at:
jquery.floatheader.js
jquery.floatheader.min.js
A demo can be found at:
http://static.slackers.se/pages/javascript/jquery-floatheader/