Sticky Header for Transaction Details

Posted about 2 months ago by SkySlope Support

Post a topic

SkySlope Support Admin

Created By Tracy Hare

Requester

Would be nice if there was an option to make the transaction details header sticky.

Information contained in that header dictates the requirement for many of the "if applicable" items in the checklist. For items further down the list, the auditor either has to scroll back and forth to get to the information, or risk making mistakes by trying to remember the details.

I use GreasMonkey to add the CSS into the app.skyslope.com/TransactionChecklist.aspx?* page when it loads on our auditors machines, but that requires me to keep the code up when you all make changes. Here's the script I use and a gif animation of the outcome for reference.

(function() {
    'use strict';

    function addStickyStyles() {
        const pageContentWrapper = document.querySelector('.page-content-wrapper');
        if (pageContentWrapper) {
            const firstChildDiv = pageContentWrapper.querySelector('div:first-child');
            if (firstChildDiv) {
                const firstChildOfFirstChildDiv = firstChildDiv.querySelector('div:first-child');
                if (firstChildOfFirstChildDiv) {
                    const targetDiv = firstChildOfFirstChildDiv.querySelector('div:first-child');
                    if (targetDiv) {
                        targetDiv.style.position = 'sticky';
                        targetDiv.style.top = '-154px';
                        targetDiv.style.zIndex = '1';
                    }
                }
            }
        }
    }

    // Add styles when the page is fully loaded
    window.addEventListener('load', addStickyStyles);
})();

0 Votes

1 Comments

SkySlope Support posted about 2 months ago Admin

Created By Tracy Hare

Requester

Just got around to the Listing Checklist page as well. A little easier.

(function() {
    'use strict';

  function addStickyStyles() {
    const targetDiv = document.querySelector('.panel.panel-default.m-b-0');

    if (targetDiv) {
      targetDiv.style.position = 'sticky';
      targetDiv.style.top = '0';
      targetDiv.style.zIndex = '1';
      targetDiv.style.borderBottom = '1px solid #cfd1d4';
    }

  }
    // Add styles when the page is fully loaded
    window.addEventListener('load', addStickyStyles);
})();

0 Votes