ScrollPage Mod for TNG

steven
Posts: 133
Joined: Sun Oct 01, 2017 3:08 pm

ScrollPage Mod for TNG

Post by steven »


There is a NEW VERSION for scrolling pages and charts both horizontally and vertically in TNG v12 and v13

Scroll long pages using four translucent buttons that scroll to the top, up, down or bottom of a page. Easily scroll ancestor or descendant charts one page at a time. The ScrollPage Mod uses smooth scrolling compatible with Chrome, Edge, Firefox, IE, Opera and Safari. Hovering changes the button color and a tool tip appears as shown below.

Image

Tool tips can be disabled in the option menu as shown below. You can also view and use the scroll buttons here. (Scroll down a few pixels to see the buttons)

Image

The mod adds custom colors and positions for all standard templates. If you do not use a template, the default color scheme will be grey and will appear in the bottom right position. If you use a custom template refer to the scrollpage-info.css file included in the scrollpage folder. The file shows a few classes and code to customize the buttons on your website. Custom template code is usually added to mytngsytle.css in the root css folder.

The mod adds one line in genlib.php and four SVG graphic files in the img folder. The remaining changes are to genstyle.css, the css files for each template, and the language files. A scrollpage.php file is created in the main TNG folder.

If you want to move buttons or change the color, refer to scrollpage-info.css file located in the scroll page folder. Add the codes for position and the color(s) you want to use to mytngstyle.css for the template you are using.

Additional CSS settings were added for template 9 to position the scroll buttons on wider screens (up to 3840 wide). The scrollpage-info.css file contains info on using @media to position the scroll button. This is useful for those that have custom templates that need additional formatting for various screen sizes.

Mod revisions:
- Added smooth scrolling for all browsers
- Fixed CSS bug position changed when switching languages
- Combined CSS classes to make it easier to change scroll button and tool tip sizes
- Fixed issue where buttons would not remain in fixed position on IOS devices
- Added option to enter how far the page scrolls before the buttons appear
- Added option to adjust the page up and down scroll distance
- Added information to scrollpage-info.css file on how to customize buttons and tool tips
- Fixed a script error for the scroll buttons
- Corrected some css errors in v11.1.2 and moved the classes into a separate folder for templates 9 though 15
 
Original versions of the mod did not allow administrators to adjust the scrolling distance for buttons or pages. Using the new adjustments you can compensate for sticky headers. Additionally allow users to see the last line(s) displayed on the new page so they easily continue reading.

Change the scroll button and tool tip sizes or use round scroll buttons by adding modified classes to mytngstyle.css for your TNG template. Refer to the scrollpage-info.css file in the scrollpage folder for instructions.

Image

To install the mod, unzip the files to the TNG mods folder. Log in to TNG and go to Administration -> Mod Manager. If MOD manager says Ok to Install, select the scrollpage mod line and then Install. If MOD manager says Cannot Install there is either a conflict with another MOD or missing code. You can either correct the problem or delete the mod.

When the mod is first installed scroll buttons may not be visible or
may appear in the wrong place. The occurs because the new styles have not been loaded. Refresh the page to reload the style sheets
(Windows - Ctrl + F5 or Safari - Command+Option+r).

Download for TNG v11.1 through 12.3 (Compact Version)
scrollpage-m_v11.1.2.0.zip

* Smaller version with less overhead but no tool tips.
* Delay showing buttons until page scrolls down
* Adjust the scroll distance when using page up and down
* No modifications to templates or languages
* Customize the buttons by adding styling to the mytngstyle.css file for the template you are using
* CSS codes are included in the scrollpage-m folder to customize the appearance
* Default buttons are round



Download for TNG v12.1 to v12.3
scrollpage_v12.0.1.7.zip

* Includes all languages and colors for all templates.
* Turn tools tip on and off
* Delay showing buttons until page scrolls down
* Adjust the scroll distance when using page up and down
* Customize the buttons by adding styling to the mytngstyle.css file for the template you are using.
* CSS codes are included in the scrollpage folder to customize the appearance.
* Tool tips include all TNG languages
* Default colors for each template
* Default buttons are rectangular.



Download for TNG v11.1.2 to v12.0.3
scrollpage_v11.1.2.3.zip

* V11.1.2 does not add styling for templates 9 through 15. The classes are in a separate file in the scroll page folder.
(Templates 9 through 15 do not have an anchor for mod manager to use)
* Customize the buttons by adding styling to the mytngstyle.css file for the template you are using.
* Turn tools tip on and off
* Delay showing buttons until page scrolls down
* Adjust the scroll distance when using page up and down
* CSS codes are included in the scrollpage folder to customize the appearance.
* Tool tips include all TNG languages
* Default colors for each template
* Default buttons are rectangular



If you delete the mod, remember to delete the scroll page folder if the "Allow Delete support folder when mod is deleted" option is not enabled in Mod Manager.
You do not have the required permissions to view the files attached to this post.
Last edited by steven on Tue Apr 28, 2020 5:56 pm, edited 4 times in total.


Last bumped by steven on Sat Aug 03, 2019 7:21 pm.