TNG Scroll Mod

[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 six buttons can 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.

SCROLL MOD CONTROL OPTIONS

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 sets the scroll button vertical position from the bottom of the page.

The fourth option sets the scroll button vertical Horizontal from the bottom either the edge of page content for the right side of the display.

The fifth option determines if the horizontal scroll position determined from the right edge of the page or right edge of the display screen.

The sixth option scrolls select charts and pages listed in the $scroll_select array located in the scrollconfig.php file. Any page active page in this array displats scroll buttons if the content overflows.
The scrollconfig.php file also contains a $scroll_none array. Active pages in this array DO NOT display scroll buttons, regardless of the files listed in the $scroll_select array.

The seventh 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 the include the TNG footer.

SCROLLING BEHAVIOR
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 work unless double chevrons are shown in the scroll direction.


TNG WIKI download link
For TNG v 13 to v15.0.0

Scroll Mod v13 to v15

28 Jan 2026 - Removed onclick from HTML to prevent direct script execution. Refactored queries and removed redundant

  code that could cause an issue with some browsers.

05 Feb 2025 - Scroll container can be positioned from mod options using either page content or display width
02 Jan 2025 - Scroll script loads in the footer to improve page loading
24 Jul 2024 - Changed anchor due to conflict
24 Jul 2024 - Changed anchor due to conflict
24 Jul 2024 - Refactored some php code, fixed a couple of js variables and deleted some unnecessary queries.
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

scroll_mod_v15.0.0.2.zip

(36.13 KiB) Downloaded 27 times

scroll_mod_v15.0.0.1.zip

(35.36 KiB) Downloaded 3661 times

scroll_mod_v13.0.3.11.zip

(28.47 KiB) Downloaded 3599 times

scroll_mod_v13.0.3.10.zip

(28.03 KiB) Downloaded 3517 times

scroll_mod_v13.0.3.8.zip

(26.9 KiB) Downloaded 4007 times

scroll_mod_v13.0.3.6b.zip

(28.97 KiB) Downloaded 4260 times

For TNG v12.3 to v14.0.3

scroll_mod_v14.0.3.4.zip

(18.83 KiB) Downloaded 4703 times

First public version
[For TNG v12.3 to v14.0.3

scroll_mod_v12.3.0.3.zip

(25.95 KiB) Downloaded 4644 times

First public version

[geraldomeier]

scroll_mod_v15.0.0.2 does not work correctly on TNG 15.0.4 using Firefox latest version 147.0.2 and Dell Ultrasharp U4025QW. The arrows are too big (clumsy() and spread over the whole height on the right side of the screen.
I had to go back to scroll_mod_v15.0.0.1 to get the nice looking again.

Gerald

[steven]

Sorry you experienced an issue with v15.0.0.2. Although the potential for XSS (cross-site scripting) was very low, the mod was updated to remove using HTML onclick with a script. So instead of using input with onclick it uses button with data-action which is more secure.

I too am using FireFox 147.0.2 with a Dell XPS 8930SE. I also tested on Safari and Edge without any problems. Ensure you refresh the page to load the new button styling. If that doesn't work, clear the cache. The CSS formatting is different for formatting the previous <input type="image"> versus the new <button type="button">.

Please check the scrollpage-info.css file for button formatting. The new CSS is different and Scroll Mod has two ways to format the button size using mytngstyle.css.

If you want the height and width ratios to be the same use:

Code: Select all

.scrbtn {
	--btn-size: 30px;
}

If you want to change the height and width ( for rectangular or ellipse shapes) separately use this styling:

Code: Select all

.scrbtn {
	height: 30px;
	width: 40px;
	border-radius: 5px; /* For rectangular (use px) or ellipse (use %) shape)
}

Please let me know if this resolves the problem.

[geraldomeier]

Hi Steven,

Thank you for the swift anser with your suggestions.

I can confirm that in firefox under settings / data protection & security / cookies and website, delete surf data (cookies & website data and temporary data and pages in cache) did fix the problem. The arrows are now in the right size, and clicking on them moves the TNG page as intended.

Problem solved - Thanks again - Gerald

[steven]

Great, glad you have it working. I must confess making the mod more secure was easy. Getting the buttons to look right was a challenge as I had not used images with data action buttons. In the past I always used onclick input type buttons with images which is easy to code.

To explain a bit, data action buttons must be formatted differently using additional CSS and extra class to control the relative size and position. Without the extra class, the image may not be in the button at all which makes positioning a disaster. This is why reloading the CSS is required.

Anyway, you're welcome and have a great day!