Grey overlay for fixed columns

[Francks11]

Hello @Mottie,

I suggest you an improvement for "Fixed Columns" : Add a grey overlay over the fixed columns to
better see the fixed columns.

You can see a demo here : http://jsfiddle.net/856bzzeL/172/

I added the necessary code in scroller widget javascript file.

At the beginning of the file :

$.extend( ts.css, {
...
    scrollerLayer  : 'tablesorter-scroller-layer',
...
});

Add options :

    options : {
        ...
        // overlay on fixed columns
        scroller_overlay : true
    },

Add css in style

    var style = '<style>' +
        ...
        /* add overlay */
        '.' + tscss.scrollerWrap + ' .' + tscss.scrollerLayer + ' { background-color: grey; z-index: 2; opacity: 0.15 }' +
        '</style>';
    $( style ).appendTo( 'body' );

At the end of updateFixed :

        if( wo.scroller_overlay ) {

            // add fixed columns grey overlay
            $( "." + tscss.scrollerLayer ).remove();
            $( "." + tscss.scrollerWrap ).append( $( "." + tscss.scrollerFixed ).clone().empty().addClass( tscss.scrollerLayer ) );
        }

Can you integrate it in next version?

Thank you.

[Mottie]

Hi @Francks11!

In the next version, the pointer events will be restored in the fixed column to allow better interaction with elements. Adding an overlay would again prevent this interaction.

I think the best solution would be to add some simple css (demo):

.tablesorter-scroller-fixed td {
    filter: brightness(0.95);
    -webkit-filter: brightness(0.95);
}

Or, if you care about older IE, then maybe change the opacity:

.tablesorter-scroller-fixed td {
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

I don't think it looks as good, so maybe add a mixture of both and change the brightness for modern browsers and opacity for older IE.

[Francks11]

It looks not very beautiful because my table have collapse cells... and we see space between cells...

I think it would be good if it is integrated like other plugin, exemple datatable.

But I can understand that it's not so simple to add this function.

[Mottie]

Instead of targetting the td, you can target any other table element in the fixed column

.tablesorter-scroller-fixed table { ... }

Change even & odd row colors, change border or text colors. Pretty much everything you are suggesting can be done with css.

I still do not plan on adding an overlay because it will prevent interaction with the table cells. To prove it, here is the original demo with the filter widget enabled... the only way to get focus to the filter inputs is to use the tab key.

[Francks11]

I know that I can this with CSS but in general I like that this is done automatically :-), just by setting an option.

The disadvantage of putting css outside the script is that if the version of table sorter and widgets evolve and some css classes disappear, it does not work. I use the script to one hundred tables and I need to be sure that it works even if I change tablesorter and widgets scripts.

One other solution is to add a vertical separator between fixed columns and other columns :-p.And all works :)

Its not a problem. I manage myself with css. :-)

Thanks

[Francks11]

Hello @Mottie,

I have found how to do grey layer work with filter input.

I have just add this css to the layer :

pointer-events: none;

In widget scroll js file :

    var style = '<style>' +
        ...
        /* add overlay */
        '.' + tscss.scrollerWrap + ' .' + tscss.scrollerLayer + ' { background-color: grey; z-index: 2; opacity: 0.15; pointer-events: none; }' +
        '</style>';
    $( style ).appendTo( 'body' );

You can find a demo here : http://jsfiddle.net/856bzzeL/193/

To do tabulation work between input, we should add the attribute tabindex for each field.

The only one problem is the interaction with the horizontal scrollbar.
I have not still had time to see but I am sure that it is possible to make something.

As you do not plan to add this improvement, what is the best way to add this improvement without changing the original source code? Should I create a new widget?

Thanks

:-)

[TheSin-]

I personally do not like this solution at all and I hope it doesn't make it into main stream TS, this is something that should be dev side. Build a class and extend a function for it. Just voicing an opinion. I think it's a good HOWTO for others and this should maybe make it into the wiki, but I don't think it should be default behaviour as this is a style/rendering thing hence depends on the devs site and layout.

[Francks11]

Hello @TheSin,

I don't be attached to the grey overlay :-) but in my opinion a separator is missing between fixed columns ans others columns.

[TheSin-]

if anything I think TS could add a class, then based on the class style could be added, I guess deciding where and what class to add is the question now. But since tscss.scrollerWrap tscss.scrollerLayer are being used I assume there already is a class, thus it should be used ;)

[Francks11]

@TheSin- , I don't understand what you mean with your last message? :-)

[Francks11]

I have proposed this improvement because it can be usefull and I have see this in script datatable :

and Excel :

But I love table sorter and I did not want to use other scripts :D

[TheSin-]

Okay so I added a panel that you can control via css, here is an example all that is needed is the last block of css for the look you want. it's currently in master so it's not in a release yet. But I'd like to mark this ticket as resolved now.

http://jsfiddle.net/856bzzeL/206/

an other example of options

http://jsfiddle.net/856bzzeL/208/

[Mottie]

👍 Thanks @TheSin-!

[Francks11]

Okay. Great :-). Thanks @TheSin-

I found two bugs with new function :

• the horizontal scrollbar is not accessible in panel, to scroll to right :

• the filters inputs are no longer accessible.

I don't use filters, but it can be blocking for those who uses them, no?

[Mottie]

Odd, I explicitly remember testing the scroll bar and inputs at one point when @TheSin- shared the demo with me in chat.... I'll look at it later tonight.

[TheSin-]

hmm I might have missed a line I'll fix it one sec. I'm working on other changes to it ATM anyhow. I think I just missed the pointer-events css maybe.

[TheSin-]

Yup I made a mistake because I cut and pasted, I has all instead of none, it's fixed now.

[Francks11]

Okay great :-)

Thank you very much

[Mottie]

I ended up adding up adding a scroller_addFixedOverlay option with a default of false because not all browsers support pointer-events.