Advanced jQuery Scroll Progress Tracker: Show side bar with the page scroll progress

Recommend this page to a friend!
  Info   View files Documentation   Screenshots Screenshots   View files View files (17)   DownloadInstall with Composer Download .zip   Reputation   Support forum (3)   Blog    
Ratings Unique User Downloads Download Rankings
StarStarStarStarStar 80%Total: 176 All time: 295 This week: 4Up
Version License JavaScript version Categories
scrolltracker 1.2.3GNU General Publi...1.5HTML, jQuery
Description Author

This is a jQuery plugin to show a side bar with the page scroll progress.

It creates either a horizontal or a vertical (or both) scroll progress indicator based on the page content.

It provides a built-in linking function, so it can be used as an interactive table of contents.

It can display one tracker on large screens and another on small screens.

Innovation Award
JavaScript Programming Innovation award nominee
August 2016
Number 2


Prize: 1 month Livecoding.tv Account Pro subscription
A Web page with multiple sections that are not completely visible can have links to make the browser jump to specific sections of the page.

However, once you click on a link to jump to a section you no longer see the links for other sections.

This jQuery plugin provides a solution that shows in a single scroll bar that is always totally visible, buttons to make the page jump to specific sections, always keeping visible buttons to jump to other sections.

Manuel Lemos
Picture of David Whitworth
  Performance   Level  
Name: David Whitworth <contact>
Classes: 2 packages by
Country: Germany Germany
Age: 35
All time rank: 1196 in Germany Germany
Week rank: 6 Up1 in Germany Germany Up
Innovation award
Innovation award
Nominee: 1x

Details

Advanced jQuery Scroll Progress Tracker v1.2.2

Dynamic Scroll Progress Tracker plugin for jQuery

(c) 2016 David Whitworth (david@whitworth.de)

Released under the GNU General Public License (GPL)

Description

A very versatile jQuery plugin that creates either a horizontal or a vertical (or both) scroll progress indicator based on your content. It is highly customizable and has a built-in linking function, so it can be used as an interactive table of contents.

Using the various options it is also possible to display one tracker (for example vertical) on large screens and another (horizontal in this case) on small screens. On top of that it is very easy to control the position, behaviour and appearance of each tracker individually.

Setup

  1. Copy the files from the css and js directories to your corresponding asset directories.
  2. Include the advanced-progress-tracker.css or advanced-progress-tracker.min.css in the `<head>`
<link href="css/advanced-progress-tracker.min.css" rel="stylesheet" />

  1. Include jQuery (if you haven't already) followed by advanced-progress-tracker.js or advanced-progress-tracker.min.js in the `<head>`
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/advanced-progress-tracker.min.js"></script>

  1. Initialize the plugin below the included scripts, like so:
<script type='text/javascript'>
    $('body').progressTracker();
</script>

Or with custom options...

<script type='text/javascript'>
    $('body').progressTracker({
        horNumbering: false,
        horTitles: true,
        horMobileOnly: true,
        verTracker: true,
    });
</script>

Live-Demo

You can find a more detailed introduction that uses the script here:

http://whitworth.de/ProgressTracker/ReadMe.html

Update history (see ReadMe.html for detailed update notes)

Version 1.2.2

Fixes:

  • Once more fixed the calculations

Version 1.2.1

Changes:

  • Added "Tips & Tricks" and "Miscellaneous" sections to the ReadMe.html
  • Removed superfluous elements
  • Automatically adjust the max-width of .spt-centerAll if necessary
  • Moved the different color-presets out of the main stylesheet

Fixes:

  • Fixed a mistake that occured when the height/padding-top where changed by the user
  • Made the positioning values for the horTitlesOffset option dynamic

Version 1.2

Changes:

  • Changed the way headlines are tracked
  • Dynamically changes the space used by the vertical tracker on large screens

New features:

  • Added option trackViewportOnly
  • Added options horColor and verColor

Version 1.1.4

Changes:

  • Changed the names of all classes and ids
  • Reduced the package size

Version 1.1.3

Fixes:

  • Revised all the calculations to eliminate redundancy and bugs

Version 1.1.2

Fixes:

  • Adjusted the default value for mobileThreshold and the max-width of .centerAll to prevent collisions with the vertical tracker
  • Repositions the vertical tracker as soon as the available space allows it

Version 1.1.1

Fixes:

  • Fixed a positioning bug for the vertical tracker

Version 1.1

Fixes:

  • Fixed the combination of horOnlyActiveTitles and horStops: false
  • Fixed the behavior of horOnlyActiveTitles, linking and skipHeadlines

New features:

  • Added title-attribute to the bullets of the horizontal tracker
  • Added option horInHeader
  • Added option horCenter
  • Added options and styles for horStyle and verStyle
  • Added option trackAllHeadlines

Credits

I'd like to thank Rene Mansveld (r.mansveld@spider-it.de) for providing me with the "headline only markup"-solution.

Miscellaneous

If you're interested in my other plugins, like the "read more" plugin used in the ReadMe.html, feel free to download them from GitHub or JSClasses.org:

https://github.com/Manostion http://www.jsclasses.org/browse/author/20883.html

Questions & Feedback

If you have any questions, notice any bugs, have issues getting the plugin to work, have an idea for a cool feature to be added, or would like to leave any other kind of feedback, feel free to contact me under David@Whitworth.de

Also, please, feel free to send me links to websites where you used this! =)

Screenshots  
  • Screenshots/AjSPT_customstyle_Screenshot.png
  • Screenshots/AjSPT_mobile_Screenshot.png
  • Screenshots/AjSPT_pc_Screenshot.png
  • Screenshots/AjSPT_tablet_Screenshot.png
  Files folder image Files  
File Role Description
Files folder imagecss (2 files, 2 directories)
Files folder imagejs (2 files)
Accessible without login Plain text file LICENSE Example License file
Accessible without login HTML file ReadMe.html Doc. Detailed description including all the possible options and a live demo of the script
Accessible without login Plain text file ReadMe.md Doc. Markdown ReadMe file

  Files folder image Files  /  css  
File Role Description
Files folder imageLESS (6 files)
Files folder imagethemes (4 files)
  Accessible without login Plain text file advanced-progress-tracker.css Data Stylesheet
  Accessible without login Plain text file advanced-progress-tracker.min.css Data Minified stylesheet

  Files folder image Files  /  css  /  LESS  
File Role Description
  Accessible without login Plain text file advanced-progress-tracker.less Data LESS stylesheet
  Accessible without login Plain text file spt-blue.less Data Version 1.2.1
  Accessible without login Plain text file spt-custom.less Data Version 1.2.1
  Accessible without login Plain text file spt-green.less Data Version 1.2.1
  Accessible without login Plain text file spt-orange.less Data Version 1.2.1
  Accessible without login Plain text file _spt-settings.less Data LESS stylesheet with additional configuration

  Files folder image Files  /  css  /  themes  
File Role Description
  Accessible without login Plain text file spt-blue.min.css Data Version 1.2.1
  Accessible without login Plain text file spt-custom.css Data Version 1.2.1
  Accessible without login Plain text file spt-green.min.css Data Version 1.2.1
  Accessible without login Plain text file spt-orange.min.css Data Version 1.2.1

  Files folder image Files  /  js  
File Role Description
  Plain text file advanced-progress-tracker.js Class Main script
  Plain text file advanced-progress-tracker.min.js Class Minified main script

 Version Control Unique User Downloads Download Rankings  
 80%
Total:176
This week:0
All time:295
This week:4Up
User Ratings User Comments (2)
 All time
Utility:100%StarStarStarStarStarStar
Consistency:100%StarStarStarStarStarStar
Documentation:100%StarStarStarStarStarStar
Examples:100%StarStarStarStarStarStar
Tests:-
Videos:-
Overall:80%StarStarStarStarStar
Rank:1