Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added new option to customize scrollbar show #19

Open
wants to merge 6 commits into
base: master
Choose a base branch
from

Conversation

alexandruchirita4192
Copy link

@alexandruchirita4192 alexandruchirita4192 commented Oct 5, 2021

The option is needed because you might want to show scrollbars under table header (this was needed in my case). I might create a ticket too if necessary, to make it as an issue.

Simplified jsfiddle with modified jqDoubleScroll:
https://jsfiddle.net/adrwxgvo/10/

Example:

  • create an empty row after table header (only one time):
if ($('.empty-inner-table-scroll').length === 0) {{ // only add empty row only once
$('#[Table Header Id]').after('<tr><td class="empty-inner-table-scroll" colspan="42"></td></tr>'); // colspan is better calculated properly, if possible; if not, any number greater than actual number of columns might work (with performance issues sometimes)
  • customize showing the scrollbar in order to show under table header:
customizeAfterShowFunction: function(e, self, options) {
    var wrapperScrollbarElement = $(options.topScrollBarWrapperSelector); // '.doubleScroll-scroll-wrapper'
    var emptyRowElement = $('.empty-inner-table-scroll');
    
    if (wrapperScrollbarElement.length !== 0) {
        // make empty row the size of the scrollbar wrapper (because the scrollbar will be on top of the empty row later)
        emptyRowElement.height(wrapperScrollbarElement.height());
        
        // move wrapper scrollbar element on top of empty row (under header)
        wrapperScrollbarElement.css('position', 'absolute !important'); // needed to be able to move the element
        var tableElement = $('table#[Table Id]'); // optional, if scrollbar is needed exactly on the table border, positioned exactly like the bottom scrollbar (with no offset difference between them on x axis)
        var offset = emptyRowElement.offset();
        offset.left = offset.left
            - parseInt(tableElement.css('border-left-width'), 10)
            - parseInt(tableElement.css('margin-left'), 10)
            - parseInt(tableElement.css('padding-left'), 10);
        wrapperScrollbarElement.offset(offset);

        // scrollbar on top of readonly divs with z-index 1000 (in my case) to be able to scroll readonly grids too (with both scrollbars)
        wrapperScrollbarElement.css('z-index', '1001');
    
        // refresh inner scrollbar element width to make scrolls size equal (this is needed in other places too, in case the table size changes)
        var innerScrollbarElement = $(options.topScrollBarInnerSelector); // '.doubleScroll-scroll'
        if (innerScrollbarElement.lenght !== 0 && tableElement.length !== 0)
            innerScrollbarElement.width(tableElement.outerWidth());
    } else {
        // if the wrapper element doesn't exist, the empty row must be hidden (height zero works too)
        emptyRowElement.height(0);
    }
}

The option is needed because you might want to show scrollbars under table header (this was needed in my case). I might create a ticket too if necessary, to make it as an issue.

Example:
- create an empty row after table header (only one time):
if ($('.empty-inner-table-scroll').length === 0) {{ // only add empty row only once
$('#[Table Header Id]').after('<tr><td class="empty-inner-table-scroll" colspan="42"></td></tr>'); // colspan is better calculated properly, if possible; if not, any number greater than actual number of columns might work (with performance issues sometimes)
- customize showing the scrollbar in order to show under table header:
customizeAfterShowFunction: function(e, self, options) {
    var wrapperScrollbarElement = $(options.topScrollBarWrapperSelector); // '.doubleScroll-scroll-wrapper'
    var emptyRowElement = $('.empty-inner-table-scroll');
    
    if (wrapperScrollbarElement.length !== 0) {
        // make empty row the size of the scrollbar wrapper (because the scrollbar will be on top of the empty row later)
        emptyRowElement.height(wrapperScrollbarElement.height());
        
        // move wrapper scrollbar element on top of empty row (under header)
        wrapperScrollbarElement.css('position', 'absolute !important'); // needed to be able to move the element
        var tableElement = $('table#[Table Id]'); // optional, if scrollbar is needed exactly on the table border, positioned exactly like the bottom scrollbar (with no offset difference between them on x axis)
        var offset = emptyRowElement.offset();
        offset.left = offset.left
            - parseInt(tableElement.css('border-left-width'), 10)
            - parseInt(tableElement.css('margin-left'), 10)
            - parseInt(tableElement.css('padding-left'), 10);
        wrapperScrollbarElement.offset(offset);

        // scrollbar on top of readonly divs with z-index 1000 (in my case) to be able to scroll readonly grids too (with both scrollbars)
        wrapperScrollbarElement.css('z-index', '1001');
    
        // refresh inner scrollbar element width to make scrolls size equal (this is needed in other places too, in case the table size changes)
        var innerScrollbarElement = $(options.topScrollBarInnerSelector); // '.doubleScroll-scroll'
        if (innerScrollbarElement.lenght !== 0 && tableElement.length !== 0)
            innerScrollbarElement.width(tableElement.outerWidth());
    } else {
        // if the wrapper element doesn't exist, the empty row must be hidden (height zero works too)
        emptyRowElement.height(0);
    }
}
Added customizeAfterShowFunction option information to README.md and explained all it's arguments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant