Scrollbox mod

From TNG_Wiki
Jump to navigation Jump to search
Obsolete The Scrollbox mod is now obsolete with TNG v13 which made charts dragable.

Restricted Downloads of Scrollbox mod are restricted to logged in users. If you do not have a user account on the TNG Wiki use the Request Account link to request a user account Restricted
Caution If you have trouble downloading with Google Chrome browser, try using try right-click and select Open in new Window, then F5, or use another browser Caution

Scrollbox mod
Summary This mod creates a box adapted to the browser window, for ancestors and descendants tree diagrams, with scrollbars if nessecary to avoid scolling to the bottom of the diagram to find the horizontal scrollbar.
Validation The mod is XHTML compliant.Valid-xhtml10.png
Mod Updated 16 Dec 2018
Download link for
TNG 12.0.3


TNG 12.0.1


TNG 12.0


TNG 11.0


TNG 10.1.3
Download stats Click here for stats
Author(s) Erik Hoppe
Homepage Scrollbox mod (this page)
Mod Support TNG Community Forums: TNG Specific - Code Discussion - Addons
Contact Developer
Latest Mod or for TNG v10.1.3 or for TNG v11.0.1 for TNG v12.0 (No Cust Templ) for TNG v12.0.1 and 12.0.2 (No Cust Templ) for TNG v12.0.3 (No Cust Templ)
Min TNG V 10.1.3 (Tested so far)
Max TNG V 12.0.3 (Tested in TNG v12.0 - No CT or NT)
Files modified
Related Mods
Author of TNG Colouring Book
Mods by me: At my user page.

Mod is OBSOLETE with TNG v13!

Charts are draggable in TNG v13.

Purpose of the mod

This was a request from several of my users.

There are two versions for TNG v10 - 11:

  • w/o suffix NT: For standard (#1 - #14 / #15) and Custom templates
  • NT for no Template

There is only ONE version (w/o suffix) for TNG v12 - only standard templates #1 - #18!
v12 NT and Custom templates may follow later.

Any of the pages that shows an ancestors or descendants diagram will, in high and wide diagrams, "hide" the horizontal scrollbar at the bottom of the diagram. These pages:
descend.php with 2 diagrams, pedigree.php with 4 diagrams, verticalchart.php, pedigreetext.php, fan.php and desctracker.php with one diagram each.

For many non-Mac users this is annoying as they often only have a vertical scrolling wheel. To scroll horizontally they have to use the scrollbar.

A very wide and high tree...
Note the size of the scrollbar handle.

Suppose you want to look at some person at the top and to the far right...

Scroll to the bottom to find the
horizontal scrollbar...
Scroll to the right,,, And finally all the way up.
ScrollboxA2.png ScrollboxA3.png ScrollboxA4.png

This is not very user friendly.

This mod creates a box, adapted to the browser window, displaying the diagram and if necessary will add scrollbars.
As the scrollbars are connected to the box, not to the page, they are always visible and at hand if needed.
See below for screenshots of this.

If you like to change the browser size to see what happens with the lay-out f.ex, you have to re-load the page as the box does not dynamically adjust to that.

Mobile / Tablet mode

When TNG detects anything but a Standard mode (i.e. it's displayed on a phone or a tablet) the TNG code is not modified at all.
The HTML source code that's generated is the TNG original so there is no mod in those cases. So there is no box.

Descendtree Counter mod

If you use my Descendtree Counter mod, the Scrollbox mod will automatically reserve space for the text.
There are no requirements for the order to install or uninstall the mods.

Template #15 (TNG v11 and above)

If you use template #15 you will find that it shows an extra horizontal scrollbar at the browser bottom, if the browser is between 1118 and 1244 pixels wide.
This is annoying but is not caused by the Scrollbox mod. The mod reserves the space for that scrollbar when it's visible.
Also: This template doesn't scroll to show the Footer as it's way too high.


This mod was developed by Erik Hoppe.
A list of all my mods is found at my user page

Mod Conflicts

The below is added to all involved mods:
Of my mods, some demand a special order to Install and Uninstall. This is one of them.
Installing / Uninstalling in the wrong order may create chaos at a later stage.
The mods may signal Okay to Install but nevertheless may not be.

Order to INSTALL:

All mods below the one you want to Install, must first be Uninstalled (if you use them).
See the Uninstall order below. You can Install them after.

  1. Maternal And Paternal Lines
  2. Scrollbox
  3. Public Access Control
  4. Forum for TNG
  5. Fixed Family Tab

All mods above the one you want to Uninstall, must first be Uninstalled (if you use them).
You can Install them after. See the Install order above.

  1. Fixed Family Tab
  2. Forum for TNG
  3. Public Access Control
  4. Scrollbox
  5. Maternal And Paternal Lines

Suppose you use the Scrollbox and Fixed Family Tab mods.
Now you want to install Maternal And Paternal Lines.
As you can see in the Install Order both the used mods are below the Maternal And Paternal Lines mod and therefore you must first Uninstall the mods in the Uninstall order:
First Uninstall the Fixed Family Tab mod and then the Scrollbox mod.
Now you can install all three mods in the Install order:
First you Install Maternal And Paternal Lines, second the Scrollbox mod and finally Fixed Family Tab.


TNG version: 10.1.3
  • A working TNG installation.
  • A backup of all affected files (see the list below)
  • An installed current version of the Mod Manager (is already included in TNG v10.x)

Upgrade to v12 for TNG v12

  • Note your edited values in Template Settings before you restore them.
  • Read below about UN-installing the mod.
  • Install and "Create Scrollbox Template Database Settings" (read below).
  • Edit your values in Template Settings as you noted them, and Save.

Before installation

Select the correct version for your purposes:

  • Use .NT if you use No Template. (Only for v10.x and v11.x)
  • Otherwise use the version without .NT (For all versions: v10.x, 11.x and 12.x)
  • Read below about UN-installing the mod.


  1. Click on the download link for your preferred version, shown in the summary in the upper right corner of the page.
  2. Un-zip the downloaded file.
  3. Move/copy/FTP the .cfg file to the mods folder of your TNG system.
  4. (Only v12.x for TNG v12) Move/copy/FTP the Scrollbox_v12 folder to the mods folder of your TNG system.
  5. Follow the normal automated installation for Mod Manager, as shown in the example Mod_Manager_-_Installing_Config_Files to install the mod.
  6. (Only v12.x for TNG v12) Click the button "Create Scrollbox Template Database Settings" to add all values to the database.

In the event of a problem

  1. Try using the Mod Manager Remove capability.
  2. Replace all affected files with the copies you made before the installation.
  3. TNG Community Forums: TNG Specific - Code Discussion - Addons

After installation

Important note to Custom Template users:
The install is not complete unless you enter the number/name of your template folder(s) in the Mod Manager Edit Options.
(No default value in these versions!)

Edit parameters

Three parameters can be edited to allow for the box to adapt to your template modifications or desires.*

  • The amount of space below the Horizontal scrollbar.
  • The amount of space to the right of the Vertical scrollbar**.
  • Reserved height for the Footer (and more if you want, above the box).


  • .NT users edit the values in the Mod Manager Edit Options.
  • All other users edit the values in Admin >> Setup >> Template settings.
ScrollboxC.png The three editable parameters
Plus the default values (not in v12): They are there for your convenience if you UNinstall - read below.
Space below Horiz. scroll Space right of Vert. scroll Height of Footer (and more if you want, above the box)
ScrollboxD2.png ScrollboxD1.png ScrollboxE1.png ScrollboxE2.png
High values = Push box up
Low values = Push box down
Use any value, also negative.
High values = Move scroll left
Low values = Move scroll right
Use 0 or above.
High values = Show more page contents
Low values = Show less page contents
When there's enough space for the Footer, the rest is reserved above the box.
Use any value, also negative.
The default for all templates when the page is scrolled to the bottom, is to show the Footer and the tabs.
Also to include the message "(Note: You may have to scroll..." to all pages (also to pages that haven't got it originally)
See below for screenshots.

*) Some settings may not work in some Custom Templates.
**) Template #5: Depending on outer margins and browser window width, may also affect page width.

Template default values

These values are also found in your Template settings (v10.x and v11.x).

A = Space below the Horizontal scrollbar. Database field: sbMarginBottom
B = Space to the right of the Vertical scrollbar. Database field: sbVbarSpace
C = Reserved height for Footer (and above box). Database field: sbFooterHeight

  • No template: A: 16, B: 54, C: 156 (Stored in customconfig.php)
  • Custom template: A: 16, B: 54, C: 156
  • TNG templates #1 - #18:
  1. A: 16, B: 54, C: 156
  2. A: -6, B: 54, C: 164
  3. A: 16, B: 54, C: 156
  4. A: 16, B: 138 C: 152
  5. A: 8, B*: 72, C: 238
  6. A: -6, B: 52, C: 152
  7. A: 16, B: 132, C: 168
  8. A: 4, B: 72, C: 136
  9. A: 4, B: 54, C: 200
  10. A: 4, B: 76, C: 200
  11. A: -6, B: 54, C: 188
  12. A: 4, B: 88, C: 164
  13. A: -6, B: 62, C: 200
  14. A: 0, B: 64, C: 168
  15. A: 0, B: 24, C: 134
  16. A: 16, B: 48, C: 188
  17. A: 0, B: 74, C: 154
  18. A: 0, B: 74, C: 154

*) Template #5: Depending on outer margins and browser window width, may affect page width.

Custom Text Additions

The config file includes the English language custom text.
There are Swedish and French translations if present in your TNG system.
For other languages you can modify the config file to add the custom text or manually add to whatever language you like.

English custom text For Reference Only!

TNG version: 12.0.0
/* Start ScrollboxMod v12.0.0.1 m1 */

$admtext['sbMarginBottom'] = "Space below Hor Scroll (also -)";
$admtext['sbVbarSpace'] = "Space to right o Ver Scroll (>=0)";
$admtext['sbFooterHeight'] = "Reserved vert. space (also -)";
$admtext['xerxxScrollnote'] = "Notes: You may have to scroll down or right to see the chart.";

/* End ScrollboxMod v12.0.0.1 m1 */

TNG version: 11.1.2
$admtext['xerxxMarginBottom'] = "Space below H Scroll (also -)";
$admtext['xerxxVbarSpace'] = "Space to right o V Scroll (>=0)";
$admtext['xerxxFooterHeight'] = "Reserved vert. space (also -)";
$admtext['xerxxDefaults'] = "Default values (keep)"; // Only v10.x and v11.x
$admtext['xerxxScrollnote'] = "Notes: You may have to scroll down or right to see the chart.";

UN-installing the mod: IMPORTANT!

.NT and all v12.x users uninstall the normal way (click the button).
All other users who have NOT saved any altered template setting, uninstall the normal way (click the button).

All other users who HAVE saved any altered template setting, will find that the mod cannot be uninstalled.
ModManager says Partially installed. This is because TNG has overwritten templateconfig.php so MM doesn't recognize the modification.

Custom template users:

  • If you have edited any value except for your Custom Template(s):
  1. Open up your Template settings.
  2. Restore all edited values to the default.
  3. Save the settings.
  • In all cases:
  1. Open the file templateconfig.php.
  2. Delete all lines with variables having names that contain xerxx AND the name of your Custom template(s).
    There are four such lines for each custom template, last among each template's other variables.
  3. Save the file.
  4. Use the ModManager Clean Up button and the mod will be uninstalled.

Standard template users - v10.x and v11.x:

  1. Open up your Template settings.
  2. Restore all edited values to the default.
  3. Save the settings.
  4. Open up Mod Manager and the mod can be uninstalled.

If you want to completely Remove (uninstall) this mod and all its tables, you should

  1. Uninstall the mod as descibed above and then
  2. (v12.x only) Click the Remove Scrollbox Template Database Settings and wait for confirmation
  3. Click the Delete button to delete the config file from the mods folder

Revision History

Version Date Description
V12.0.3.0 16 Dec 2018 New version for TNG v12.0.3 standard templates 1 - 18. Fan chart gave "Bad target".
V12.0.1.0 28 June 2018 New version for TNG v12.0.1 standard templates 1 - 18. Thanks to Ron for the alert.
V12.0.0.1 8 May 2018 New version for TNG v12 standard templates 1 - 18. Thanks to Ken for Suggestions!
Remember to read UNINSTALL instructions!
10 Nov 2017 The fan chart (fan.php) is included. Remember to read UNINSTALL instructions!
16 Sept 2016 Slow Scrolling will leave the Tabs visible. Maternal & Paternal lines mod pages are modified if present. Reserves space for Descendtree Counter mod text (if present).
10 July 2016 Verticalchart.php showed no border. Corrected.
All affected pages now auto-scroll to bottom to show the full box. Thanks to Ron for the tip.
8 July 2016 Bad target for CT and ST versions. Corrected.
8 July 2016 Introduction.
Six versions made: For Standard (and customized), Custom and No templates.
Looking for beta testers...

Visualization of this mod

The page in these screenshots: - Andersson, Hoppe, Sahlin, Thorell
The size of this browser window is approximately 1200 x 900 pixels.

NOTE! The mod now lets the TABS VISIBLE when scrolled to the bottom. Not so in these screenshots.

Page auto-scrolled to the bottom:
Box height is adapted to the browser window.
Top of page:
Note the size of the page (rightmost) scrollbar handle.
ScrollboxB2.png ScrollboxB1.png

Sites using this mod

If you download and install this mod, please add your TNG site to the table below:

Regarding my Swedish-Only site below: Using the Google setting "English language" and then google for the site, I have a "Translate this page" beside the link. If I use it I get a quite decent translation...

URL User Note Mod-Version TNG-Version User-language
Botebygden (Only Swedish) Erik Hoppe
Mod author
Public site w/ several mods on display
Demo of this mod 12.3 SE
Roots & Relatives Remembered Ron Krzmarzick Public & Private See Here See Here EN,DE,CS,ES
Our Family Links Chuck Filteau Public site, modified Template 12 v10.1.3.0 v10.1.2 EN Ingemand Great mod 11.0.2 SE, GB, DE , DK, NO, ES, FR,NL
racine d'Alsace J-Louis Valory Public/Private - Template 17 12.0.1 French
tobbes familje sidor Torbjörn Åkerman Public site 11.1.2 SE, EN, FI

TNG Modules Impacted

The following TNG Modules are modified, and should be backed up prior to installing this mod:

  • customconfig.php (only vers .NT)
  • descend.php
  • desctracker.php
  • fan.php
  • pedigree.php
  • pedigreetext.php
  • templateconfig.php (not vers .NT or v12.x)
  • verticalchart.php
  • js/tngpedigree.js
  • xerxxFamilyMaternalLine.php - if present
  • xerxxFamilyPaternalLine.php - if present
  • xerxxIndividMaternalLine.php - if present
  • xerxxIndividPaternalLine.php - if present

The custom texts will be added to these files, which should also be backed up prior to installing this mod:

  • languages/English/cust_text.php
  • languages/English-UTF8/cust_text.php
  • languages/French/cust_text.php - if present
  • languages/French-UTF8/cust_text.php - if present
  • languages/Swedish/cust_text.php - if present
  • languages/Swedish-UTF8/cust_text.php - if present