upgrading tablesorter 2.1.19 to 2.13.2

[thezoggy]

noticing a few hiccups, mainly all looks to stem from:
12ca586

in the css files we mention the 3 variants like:

.tablesorter thead .headerSortUp,
.tablesorter thead .tablesorter-headerSortUp,
.tablesorter thead .tablesorter-headerAsc {

however now only the last one works after the above mentioned commit

       sortAsc    : 'tablesorter-headerAsc',

so this caused me a bit of a upgrade struggle to figure out what css names no longer work...

then i noticed odd quirks now where the tfoot gets the same css applied as the thead now.. (im not using the built in css, so now i have to go update all my selectors to reflect only thead not just classes)

appears that the stickyHeaders css isnt being applied.. still trying to track down what broke on this one..

[thezoggy]

dropping headerSortUp / tablesorter-headerSortUp is fine.. just needs to be documented / included css needs to be updated. so looks like due to the changes on how stickyheaders works.. i cant apply a padding to it anymore.. what I used to do is give it a 2px padding + background color.. so that way it pushed it off the browser viewpoint a little bit and didnt get lost in the table if a similar color to the header was used.. not a huge deal if this cant be done anymore

[Mottie]

Hey @thezoggy!

LOL honestly, I forgot I did that to the css... I think I was working on version 3 and accidentally did that to version 2.

The stickyheader widget changed from adding a second thead within the table to adding a completely separate table after the original one, showing only the thead. It was the easiest way to include the caption and multiple rows.

At the top of the sticky headers demo, I put a comment that as of v2.9, the widget won't work with earlier versions. Anyway, you can target the tables by class name.
The original table will have the class hasStickyHeaders while the second sticky table has the class containsStickyHeaders.

[thezoggy]

so noticed a few issues on http://mottie.github.io/tablesorter/docs/example-widget-sticky-header.html
load up latest from firefox (25), pick theme 'green' scroll down.. you will notice that the right border is there for the caption.. not on the left. on 'ice' its the reverse. -- its not really a border but offset is just off slightly.
for the jui theme.. the caption looks bad with just white (prob depends on the theme obviously).. maybe do something like background: rgba(255, 255, 255, 0.8); you left bootstrap out of that page btw :)

dark theme w/caption looks a bit off.. prob should reverse that. also noticed that the dark theme has something funky going on with the filter input sizes...

also, go from 'black-ice' to 'ice' doesnt seem like the css is being reloaded correctly.

[Mottie]

Actually, the sortAsc option was changed in v2.5... there is a note in the docs, but it only says it was changed. I'll elaborate a bit more in the next update.

Should I add an option to include the tfoot cells while sorting?

Did you figure out the sticky header css issue?

I'll have the sticky header demo fixed up and various theme tweaks done in the next update.

Thanks for reporting these issues!

[thezoggy]

I dont know how others use the tfoot but I personally would not want them included in any way.. id say just leave it as is until someone else complains about it :) for the css i just had to reset a bunch of stuff due to selectors.. but thats on my css since im not using your included stuff

i got the sticky header stuff figured out.. i ended up having to do something like:

thead.tablesorter-stickyHeader {
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

[Mottie]

Hey @thezoggy!

I didn't get around to working on the green theme sticky header. But I was thinking about adding a new parameter stickyHeaders_offsetX which allows you to adjust the position of the sticky header. But since webkit seems to already work perfectly, it will only target non-webkit/non-IE browsers in this code:

if ($table.css('border-collapse') !== 'collapse' && !/(webkit|msie)/i.test(navigator.userAgent)) {
    // Firefox & Opera use the border-spacing
    // update border-spacing here because of demos that switch themes
    spacing = parseInt($header.eq(0).css('border-left-width'), 10) * 2 + wo.stickyHeaders_offsetX;
}

I know it's just a patch to the problem, but I think I've tried everything else to get the sticky headers pixel perfect

hang head my OCD is not happy with my skillz.

Oh, and I tried adding the Bootstrap theme to the sticky header demo... something that I couldn't find kept interfering with the positioning of the font-icon and I got frustrated enough to just drop it, again.

[thezoggy]

you can just apply a margin/padding to the table itself.. the problem is that with sticky headers the header is stuck to the top of the browser viewpoint when scrolling..which normally is fine but sometimes you wanna give it some padding (which you cant because you apply 0 to the thing) so my hack was just to introduce a border on top/bottom which dont mess with the width calculations.

i dont think you should be allowing border-left/right on the thing.. as i can only see that resulting in more width calculation issues

[Mottie]

Hey @thezoggy!

Sorry, I finally got around to fixing the theme selectors...

Edit: Was there something else I needed to address here? errr, I mean is there a css fix for the green sticky headers? Or was there something I was missing?

[thezoggy]

let me test the newest version and get back to you

[thezoggy]

there is some css changes needed.. for one we show hand pointer on the headers.. even if it cant be sorted.

looking at: http://mottie.github.io/tablesorter/docs/example-widget-sticky-header.html

blue theme, you can see that the caption has a left border (its not really on the caption though, its because the table left value is one off... if you change it to -1 then the border appears on the right side): http://zoggy.net/ts-caption.png
thus im not sure what really can be done about this..

on the green theme, its the opposite effect.. and even worse because of the border width... resizing the window makes the issue get worse/go away depending i would assume on browser's rounding of width.

ice theme is missing its top border when stickyheaders goes into effect...
http://zoggy.net/ts-ice.png

[Mottie]

Yeah, I don't know...

Do you think this idea is feasible?... sticky header rows using css transforms... it bounces a lot while scrolling, but there is no need to clone the header rows.

[thezoggy]

that actually works out really well in my browser.. ff25 w/win7. i would assume this is only going to work for 'modern' browsers though.

[Mottie]

I'm guessing this issue has been resolved, so I'm going to close it. If you continue to have problems, please feel free to continue this discussion.