Difference between revisions of "Scrollbox mod"

From TNG_Wiki
Jump to: navigation, search
(Sites using this mod)
(Sites using this mod)
Line 378: Line 378:
| [http://racine-ad.fr/TNG/index.php racine d'Alsace]
| [http://racine-ad.fr/TNG/index.php racine d'Alsace]
| J-Louis Valory
| J-Louis Valory
| Public/Private - Template 1
| Public/Private - Template 17
| 11.1.2
| 12.0.1
| French
| French

Revision as of 14:40, 30 June 2018

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

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 28 Jun 2018
Download link for June 25 2018
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 My Mod Support
Contact Developer My Mod Support
Latest Mod or for TNG v10.1.3 or for TNG v11.0.1 for TNG v12 and later (No Cust Templ)
Min TNG V 10.1.3 (Tested so far)
Max TNG V 12.0 (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.

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.

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


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. 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 (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.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: xerxx.se - 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 (26 custom templates) 12.0.1 EN,DE,CS,ES
Our Family Links Chuck Filteau Public site, modified Template 12 v10.1.3.0 v10.1.2 EN
www.blumensaadt-ingemand.dk 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
Cole / Tanner Family Tree David Cole Private Site 11.1.2 English

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