Scrollbox mod

From TNG_Wiki
Revision as of 10:02, 23 November 2017 by XerxX (talk | contribs) (Updated Sites Using...)

Jump to: navigation, search
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 are having trouble downloading with the Google Chrome browser, try 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 {{{mod_last_update}}}
Download link for
TNG 11.0


TNG 10.1.3
Download stats Click here for stats
Author(s) Erik Hoppe
Homepage Scrollbox mod (this page)
Mod Support My Mod Support
Contact Developer My Mod Support
Latest Mod or for TNG v10.1.3 or for TNG v11.0.1 and later
Min TNG V 10.1.3 (Tested so far)
Max TNG V 11.0.2 (Tested in TNG v11.0.1)
Files modified
Related Mods
Author of TNG Colouring Book
Mods by me: At my user page.

Purpose of the mod

This was a request from several of my users.

There are two versions:

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

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 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.

Maternal & Paternal Lines mod

If you use my Maternal_And_Paternal_Lines mod those pages will automatically be modified by the Scrollbox mod.
If you want to install it you should install it BEFORE the Scrollbox mod.
Also remember to Uninstall it after the Scrollbox mod.

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)

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


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)

Before installation

Select the correct version for your purposes:

  • Use .NT if you use No Template.
  • Otherwise use the version without .NT
  • 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. (If you find a folder: Don't bother - it's a Mac thing...)
  3. Move/copy/FTP the .cfg file to the mods folder of your TNG system.
  4. Follow the normal automated installation for Mod Manager, as shown in the example Mod_Manager_-_Installing_Config_Files to install the mod.

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. Contact me through My Mod Support.

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: 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.

A = Space below the Horizontal scrollbar.
B = Space to the right of the Vertical scrollbar.
C = Reserved height for Footer (and above box)

  • No template: A: 16, B: 54, C: 156 (Stored in customconfig.php)
  • Custom template: A: 16, B: 54, C: 156
  • TNG templates #1 - #15:
  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

*) 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 is a Swedish translation if it is 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!

$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)";
$admtext['xerxxScrollnote'] = "Notes: You may have to scroll down or right to see the chart.";

UN-installing the mod: IMPORTANT!

.NT 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:

  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. Click the Uninstall button to uninstall the mod and then
  2. Click the Delete button to delete the config file from the mods folder.

Revision History

Version Date Description
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:

URL User Note Mod-Version TNG-Version User-language
Andersson, Hoppe, Sahlin, Thorell Erik Hoppe Mod author 11.1.2 SE, GB, DE
Roots & Relatives Remembered Ron Krzmarzick Public & Private (added 7 templates) 11.1.2 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

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)
  • 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/Swedish/cust_text.php - if present
  • languages/Swedish-UTF8/cust_text.php - if present