TNG Scroll XY Mod

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

TNG Scroll XY Mod

Post by steven »

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 does 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 does 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-xy buttons off on all pages except the chart pages or any added to the $scroll_all array in scrollconfig.php. Use this option to scroll charts but not display buttons on other pages. If you use a template that has a scroll to top button, it will continue to appear on overflowing pages that do not display scroll-xy buttons. However the scroll to top button and scroll-xy buttons will not appear at the same time. If this option is not used, scroll-xy buttons will be shown instead of the scroll to top button.


All buttons default to grey but can be customized by adding a few classes to the mystngstyle.css file. The mod uses SVG graphics so pixelation does not occur when changing button sizes. 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.
Note that scroll-xy no longer scrolls charts horizontally in TNG v13 due to the new drag feature.

For TNG V 12.1 through v13.0.4

Revision in v12.1.0.6a
Moved inline css to genstyle.css to eliminate W3C HTML validation error

For TNG V 12.1 through v13.0.3
(7.39 KiB) Downloaded 32 times

Revision in v12.1.0.6
Added script to scroll v13 charts vertically

For TNG V 12.1 through v13.0.1
(7.39 KiB) Downloaded 125 times

Revision in v12.1.0.5
Fixed styling so buttons do not appear until style sheets (genstyle.css) is reloaded.
(7.39 KiB) Downloaded 23 times

Revision in v12.1.0.4
This version hides the Scroll to Top button shown on pages that show scroll-xy buttons. When the scroll select pages option is selected, the scroll to top button is used on overflowing pages except charts, which will use scroll-xy buttons.
(7.17 KiB) Downloaded 49 times

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.