TNG Scroll Mod

Posts: 133
Joined: Sun Oct 01, 2017 3:08 pm

TNG Scroll Mod

Post by steven »

The Scroll Mod was created due to changes in TNG that prevented Scroll-xy from scrolling horizontally and installing in TNG v14. The first release scrolled pages vertically if they have overflowing content, the newest version also scrolls horizontally except for templates 2, 4, 5, 6, and 7. These templates present pages as tables. A template mod was created so these templates can be scrolled both directions.

A page or chart with minimal vertical overflow will display two translucent scroll buttons at the lower right of the display screen that scroll up and down.


When the page or chart vertical overflow exceeds two viewable pages, four scroll buttons appear.


When a chart overflows horizontally but not vertically, two buttons appear scrolling left and right.


When a chart overflows in both directions four buttons appear.


If the overflow exceeds two viewable pages in both directions, eight buttons appear with the additional buttons that scroll to the top, left edge, right edge or bottom of the page.


IMPORTANT! The grab and drag feature was introduced in TNG v13. When the chart is dragged it moves the chart within the div using CSS translation which DOES NOT change the scroll coordinates. Since Scroll mod scrolls the div coordinates, it will still scroll the the chart within the div if it has been dragged. However, it cannot scroll the chart back to the original position. Use the 1:1 magnifier glass to return the chart to the original coordinates within the div. Image


The first option is the vertical scroll distance. This controls how far the up and down the page content moves. The number represents the percentage of the display height. The range limits are from 10 to 100. A setting of 10 does not scroll the screen very far while 100 scrolls the height of the display. Changing this value is useful when using a template that has a sticky header or you do not want the last line viewed to scroll off the screen.

The second option is the horizontal scroll distance. This controls how far the left and right the page content moves. The number represents the percentage of the page width on most templates. Otherwise percentage of client screen width is used. The range limits are from 10 to 100. A setting of 10 does not scroll the screen very far while 100 scrolls the width of the page or screen. Changing this value is useful when you want to scroll the chart a smaller distance horizontally.

The third option selects between scrolling all pages not in the scroll_none array or charts listed in the scroll_charts array. These arrays are in the scrollconfig.php file.

The fourth option hides the scroll buttons on the home page even if the page has overflowing content. If scrolling charts is enabled, this option has no effect.

The mod automatically hides scroll buttons on pages listed in scrollconfig.php file located in the TNG root folder. The $scroll_none array contains a few files, most of which are commented out. You can uncomment any file or add files to the array if you want to hide buttons on particular pages. The $scroll_charts array lists which pages to scroll when Scroll Charts Only is enabled.

If you use a custom template that uses the TNG scroll to top function, it will not appear on any overflowing pages.
NOTE: Scroll to Top and Scroll Mod buttons may appear together if you created your own scroll to top function and did not use the TNG scroll code. This may also occur with some TNG/Wordpress integrations.

Scroll buttons can be customized by adding a few classes to the root mytngstyle.css or template mystngstyle.css file. You can change the color, size shape and position. Examples of the classes and their functions are included in the scrollpage-info.css file located in the scrollmod folder.

Search results can display more scrolling content by going to the admin control panel, select General, Miscellaneous, Max Search Results and set it to a higher value. This results in longer, but fewer page results.

Scroll mod also scrolls pages made with the historytemplate.php file.

Clicking a button once scrolls a percentage of the page specified in the mod options. However, if the button is clicked again, before scrolling stops, it will scroll a little further. This allows double clicking to scroll a slightly longer distance. You can then scroll back one click to see page content. This feature does not unless work double chevrons are shown in the scroll direction.

For TNG v14.0.3+
TNG WIKI download link

31 Mar 2024 - Renumbered mod as it is compatible with v13 and v14
29 Mar 2024 - Resolved duplicates and buttons not appearing on some templates
22 Mar 2024 - Changed anchor point to avoid button loading twice in some templates.
17 Mar 2024 - Removed some queries and variables that were not needed.
10 Mar 2024 - Removed white space at top of page on GWT templates and templates 19 and 21.
Added horizontal scrolling to edge of page.
Uses page or client screen width for scroll calculations.
Added option to only scroll charts
26 Feb 2024 - Rewrote mod new scroll scripts
09 Dec 2023 - Removed redundant css and php code.
18 Nov 2023 - Added horizontal scrolling.
Scroll Mod script loads once per page.
Scrolls pages created with historytemplate.php
For TNG v12.3 to v14.0.3

First public version

For TNG v12.3 to v14.0.3

First public version
You do not have the required permissions to view the files attached to this post.