TNG Scroll XY Mod

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

TNG Scroll XY Mod

Post by Steve »

The Scroll XY Mod has been enhanced to scroll in both the vertical and horizontal directions. It has more features than the ScrollPage mod written a couple years ago. Unlike the previous versions, buttons only appear on pages with overflowing content. If the content overflows horizontally, scroll right and left buttons appear.

On most pages four translucent scroll buttons appear at the lower right of the display screen. Those buttons scroll to the top, up, down or bottom of the page.


On chart pages with horizontal overflow, there are six buttons with the two additional buttons scrolling horizontally. If the ancestors or descendant generations changes and content no longer overflows, the buttons are hidden.


Click here to try the scroll mod on my family website.


The mod has six options to control behavior. Enabling the first option hides the scroll buttons until the screen scrolls down. Control how far the screen scrolls before displaying buttons by setting the distance in option 2.

The second option is the number of pixels to scroll before the buttons appear. The range is from 0 to 800 pixels.This setting has no effect if the first option is disabled.

The third option is the horizontal scroll distance. This controls how far the left and right buttons scroll the display. The number represents the percentage of the display width. The range limits are from 10 to 100. A setting of 10 will not scroll the screen very far while 100 scrolls the width of the display.

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

The fifth option hides the scroll buttons on the home page. The feature can be used when the inner menu is displayed on the home page and you do not want to display scroll buttons. (Template 15 for example)

The sixth option turns the scroll buttons off on all pages except the chart pages or any added to the scrollconfig.php file. Use this option for scrolling charts but not displaying buttons anywhere else.


All buttons default to grey but can be customized by adding a few classes to the mystngstyle.css file. Examples of the classes and their functions are included in the scrollpage-info.css file located in the scroll-xy folder.

For example, the default buttons are 20px high. Add the following code to mytngstyle.css you can easily change the button size.

Code: Select all

.scrbtn {
	height: 40px;

Scroll-xy loads with the inner menu so a configuration file (scrollconfig.php) was added to control which TNG files display scroll buttons. After installing the mod, edit the scrollconfig.php file, located in the extensions folder, to add or remove which TNG files display scroll buttons. This file contains two arrays. When option six (Scroll Select Pages) is enabled, only TNG files listed in the $scroll_all array will display scroll buttons. Comments in the file explain the functions. The $scroll_none array contains files that will not display scroll buttons. Use this to prevent displaying buttons on pages with small amounts of overflow. If you enter a file name in both arrays, by mistake, the $scroll_all array has priority.

The Scroll-xy mod makes scrolling content easier. To make search results display more content, go to the admin control panel, select General, Miscellaneous, Max Search Results and set it to a higher value. This causes TNG to display more results with less pages.

This mod does not have any known installation conflicts and is compatible with mods that do not change the div tag for TNG pages. There are no conflicts with the ScrollBox mod, however, scroll-xy will not display scroll buttons on pages modified by ScrollBox.

For TNG V 12.1 through v13.0

Revisions in v12.1.0.3
Smaller code, same functionality.
Fixed vertical scroll distance override.
(13.12 KiB) Downloaded 99 times

Revisions in v12.1.0.2c
Combined a few CSS classes to make customizing the buttons easier
Added more detail to the readme.txt file
Default buttons are smaller using less display space
The scroll container does not load on pages specified in scrollconfig.php

Revisions in v12.1.0.2b
Separated when vertical and horizontal scroll buttons are displayed
Added adjusting the horizontal scroll distance
Revisions in v12.1.0.2a
Updated the ReadMe.txt file
Corrected some typos in scrollconfig.php
Added more charts to scrollconfig.php
Changed two class names for consistency
Added horizontal scrolling for fan and vertical charts
added link to TNG WIKI
You do not have the required permissions to view the files attached to this post.