jQuery floating table header plugin
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.
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.
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
jquery.floatheader.js
jquery.floatheader.min.js
A demo can be found at:
http://static.slackers.se/pages/javascript/jquery-floatheader/
News
2012-08-19
This plugin is no longer maintained by me and this page will therefore not be updated anymore.
2011-01-04
1.4.0!
Lazy loading of tables and performance optimations by Jason Axley
2010-08-02
1.3.0!
- Better ie6 support, http://plugins.jquery.com/node/16655
- Fixed parameter name typo, http://plugins.jquery.com/node/16819
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/
Comments
IE7+ and FF3+ have one minor bug when resizing the browser window, where the header row no longer line up(width wise) with the data rows.
looking forward to an updated version..
Below is the updated code - new stuff is marked with a comment
(edit by Erik) Removed the code to save some space on the page, sorry Diego.
If not - then it doesnt float the headers on the postback - any ideas why? or, if the headers are in float, and there is a ajax postback, the float sticks to the top of the page.
Thanks a lot for the feedback
http://steve.thefuhry.com/screenshot.normal.jpg
http://steve.thefuhry.com/screenshot.suck.jpg
in IE 8 my table header jumps to the bottom of the screen.
I have a number of tables in tabs - it works on the first page, then throws an uncaught exception on the other pages and the table header goes nowhere.
I guess it could also be solved by adding a destroy method? That way I could destroy/initialise the floating header as I need it for each tab.
Anyone be able to help with this?
Cheers
Glenn
This is caused by the code constantly triggering the $(window).resize event. This is because of a bug in IE's handling of resizing where you have to check document.documentElement.clientHeight/Width.
Above the call to createFloater(table, self, config); add the following two lines:
self.IEWindowWidth = document.documentElement.clientWidth;
self.IEWindowHeight = document.documentElement.clientHeight;
These are local variables to hold the current width and height of the window to test on the event.
The $(window).resize event needs to be replaced with the following:
// bind to the resize event
/* Unfortunately IE gets rather stroppy with the non-IE version, constantly resizing, thus cooking your
* CPU with 100% usage whilst the browser crashes. So, test for IE and add additional code.
*/
if ( $.browser.msie && $.browser.version <= 7 ) {
$(window).resize(function() {
// Check if the window size has changed ()
if ( (self.IEWindowWidth != document.documentElement.clientWidth) || (self.IEWindowHeight != document.documentElement.clientHeight) ) {
// Update the client width and height with the Microsoft version.
self.IEWindowWidth = document.documentElement.clientWidth
self.IEWindowHeight = document.documentElement.clientHeight
table.children().remove();
createFloater(table, self, config);
}
});
} else {
$(window).resize(function() {
// recreate the floating table
table.children().remove();
createFloater(table, self, config);
});
}
Glenn
There's loads written about this where IE6 ignores position:fixed and needs to use position:absolute instead. Unfortunately there's some CSS tricks required to simulate this on IE6.
Most of these have been somewhat documented in Stu Nichols' CSSplay.co.uk website.
In summary you have to move the document scrolling down to the body. This should be done using conditional comments to import the usual IE6 override file. Typically youd' use something like this:
* html { overflow:hidden; }
* html body { height:100%; overflow:scroll; }
Once done, absolute positioning will work like fixed positioning.
The jquery.floatingheader.js file needs to be modified to allow scrolling to be detected on the body as $(window).scroll won't trigger if the CSS was changed as above.
The config needs to have a new flag:
IE6Fix_DetectScrollOnBody:false
This enables the client to move the scroll detection in IE6 down to the body element.
Replace the line:
$(window).scroll(function() {
With the following:
--------------------------
/* This is very specific to IE6 only if using position:fixed fixes. This requires the window overflow to be set to
* hidden and the containing 'body' tag to have overflow:auto.
*/
if ( !$.browser.msie ) {
config.IE6Fix_DetectScrollOnBody = false;
} else {
if ( $.browser.version > 7) {
config.IE6Fix_DetectScrollOnBody = false;
}
}
var scrollElement = config.IE6Fix_DetectScrollOnBody ? $('body') : $(window);
// bind to the scroll event
scrollElement.scroll(function() {
-------------------------
In this function, replace the line:
self.floatBox.css('position', 'fixed');
With the following code:
--------------------------
if ( $.browser.msie && $.browser.version < 7 ) {
// IE6 can't handle fixed positioning; has to use absolute and additional calculation to position correctly
self.floatBox.css('position', 'absolute'); // strictly speaking, this isn't necessary as it is position:absolute
} else {
self.floatBox.css('position', 'fixed');
}
--------------------------
Glenn
1) huge table incorect table width. Especialy in FF
fix: target.width(template.outerWidth());
2) everywhere instend of table.children().remove();
fix: better to use table.empty(); //children().remove();
fic: floatRow.empty(); //children().remove();
3) Maybe usefull in some scripts - to not duplicate ids
target.removeAttr('id');
$('*', target).removeAttr('id');
4) floatBoxVisible not defined
self.floatBoxVisible = false; //after self.floatBox.append(table);
inspite of IE TH reports padding = 1, floatCell shoud be set in 0
after floatCell.css('width', cell.width());
fix: if ($.browser.msie) {
floatCell.css('padding', '0 0 0 0');
};
I am not able to make it work on ie6...
ie6 is getting hang on scroll.
Please let me know if i am doing something wrong
Please see...
previous
// copy all style and class properties -)
var table = self.clone();
table.empty();
and the second one
//after
// append the floatBox to the dom
$(self).after(self.floatBox);
// specialy fix for Safari browser
$(window).one('scroll', function() {
table.empty();
createHeader(table, self, config);
});
and the last one
thanks for include in Contributors
But I agree with Vasilianskiy Sergey put back in the self.clone.
// copy all style and class properties -)
var table = self.clone();
table.empty();
Also I found that in IE (all versions) the header columns to not always size correctly I had to change the code:
floatCell.css('width', cell.width());
if ($.browser.msie) {
floatCell.css('padding', '0 0 0 0');
};
to
if ($.browser.msie) floatCell.css('width', cell.outerWidth());
else floatCell.css('width', cell.width());
Nice little plugin thanks for writing it.
If you have more issues and/or suggestions you can always contact me through my email which is on my profile page.
1) when use console, always check if it presents: not all browsers use right libs. -)
if (console) { console.log("The table contains no header"); };
2) after every command add ;, as not all packers likes \n
example: return;
floatCell.css('padding', '0 0 0 0') rules
Please contact me through email, it's on my profile page.
I have tried to implement it in a asp.net application using AJAX. It seems that it has some problems with async programming?
The header works fine the first time I enter a page, but if I click a button on the page or re-sorting a datagrid, I get an javasrcipt error message "Unspecified error", char 35440
I have tried a "clean" asp.net page(.aspx) without any AJAX or updatepanels and then it works fine.
function pageLoad() {
jQuery('#example1').floatHeader ({
fadeIn: 250,
fadeOut: 250
});
}
At first I used:
jQuery(document).ready(function() but after some reading on internet I found out that pageLoad is more suitable
$("#"+id).floatHeader(opt).css("display","");
$("div.floatHeader #"+id).attr("id","").css("display","").find("tr").attr("id","");
What I ultimately did was every time I refreshed the page I did called the following code:
jQuery(window).unbind(); jQuery("#myTable").floatHeader();
The Error in the Jquery.js script your getting at like 5000something is because basically it is trying to double bind to the window. In IE this is handled as an error. So to correct that just unbind the window before recalling floatHeader().
Hope that helps!
It would be great if you could extend this plugin to do the same with the table footer (e.g. when scrolling up and the footer isn't visible, it gets moved to the bottom of the screen, opposite to the header functionality)
http://remind.com.br/projetos/criar-blog-gratis/ureplicawatches/
http://remind.com.br/projetos/criar-blog-gratis/ureplicawatches1987/
http://replbags.livejournal.com/
http://replcawatche.livejournal.com/
http://repldbags.livejournal.com/
http://replica69bags.insanejournal.com/
http://replicabag242.livejournal.com/
http://replicacheap.21classes.com/weblogCategory/1951uut1lrg4t
http://replicacheap.ayubd.com/
Oddly and contrary to other comments mine worked fine in all browsers I tried except IE7.. even with the demo from this page.
I changed the line:
if ($.browser.msie && $.browser.version <= 7) {
to <= 6 and bingo bango everything works fine.
so that time i am losing the floating header :(
is there any solution for this.. please let me know asap. :(
i just wanna execute a js function but aswell fadein/fadeout the table ..
when i set a cbfadein function it only executes that function but the tbl header isnot floatin anymore.
Thank you for your work!
I have a suggestion - make a plugin work with custom container instead of "window"/"document" (maybe passed as a selector in "options").
It would be nice to have a table placed inside DIV with fixed height and have fixed header, like in WinForms DataGrids.
You can contact me through email on my blogger profile i think...
If you don't have time for this, let me know and I will try to make do. I think all I need to do is add a detect for horizontal scroll and fire the recalculate on that as well. I can't seem to figure out where/how to do this.
Thanks again, you are tops.
http://programmingdrunk.com/floatThead/