IE9 support: the new Sticky Headers widget based on CSS "transform"

[gakreol]

I love the new "transform - translate" method of sticking the headers described in this forum with this fiddle http://jsfiddle.net/Mottie/abkNM/1618/

I did not use the new beta widget for my project, just used this code.

However Mottie says IE10 does not support it, even though it should according to caniuse.com.

I found out why it is not working in IE10, and the method (with my workaround for IE) actually works even in IE9.

Mottie, go to your fiddle here http://jsfiddle.net/Mottie/abkNM/1618/
and add another children() in the third line, so it looks like this:
$trs = $thd.children().children();

Now the header sticks in IE9+.

Reason is THEAD or TR are "empty" to IE, no transforming them. Only the leaf elements (TD and TH) can be transformed.

[Mottie]

Hi @gakreol!

Thanks for solving this problem! I'll have it updated in the next patch :)

[gakreol]

Hello @Mottie ,

I wanted to share another CSS sticky header with you: http://jsfiddle.net/QQRL5/2/
This is useful if you have a table in a scrollable DIV and want the header to stick to the DIV not to the window top.
For example, my tables are in a jQuery Accordion, that is in turn on one of jQuery Tabs.

Do you think such table-in-scrollable-div layout is popular enough to incorporate in Tablesorter?
If yes, I hope it will be an easy change/addition for you.
If not, then I am leaving this note here for anyone who uses this layout, like I do.

Also want to mention one quirk. Some browsers (IE9 for example) forget the scroll position of a DIV if that DIV is hidden and then shown (this is how DIVs in Accordion and Tabs work). The DIV scroll position returns to the top. If the header was moved from top as a result of the previous scrolling of the DIV before the DIV was hidden, the table in the newly shown DIV will have no header, and the header will be somewhere in the middle of the TBODY.

I fight this quirk by initiating a quick 1px scrolling in the Accordion "activate" event, it returns the thead back to top of the table:

$(function() {
$( "#core1" ).accordion({
heightStyle: "fill", activate: function( event, ui ) {
if (ui.newPanel.scrollTop() === 0) {ui.newPanel.scrollTop(1).scrollTop(0);}; //quick scroll of Accordion pane to make IE9 return the thead back to top if it was previously moved.
ui.newPanel.find('table').trigger('search', false); return false;} // update tablesorter if the table was filled while the Accordion pane was hidden
});
});

This is a prototype. Ideally this piece of code should also be checking on transform CSS being set to anything but zero, before initiating the 1px scrolling. I am still not done with my project, will have it there later.

I hope this info will come useful to someone.

[Mottie]

@gakreol!

Awesome! thanks for sharing :)

[TheSin-]

man I can't wait to try all this new stuff I've been so busy preping for this seminar I'm speaking at I haven't been able to update, but heat job on all the amazing additions everyone!