jQuery Plugin To Display Estimated Reading Time - Readremaining.js

Readremaining.js is a jQuery plugin that shows the reader how much time will need to get to the end of the article. Works much more precise when the content of the scrolling element is homogeneous. If the size of the text or complexity of images change in different parts of the scrolling element, then the accuracy will drop.

Has four parts or functions:

• The init: 1.1 set the variables, 1.2 measure and show the gauge for the first time if it was requested, 1.3 start the scroll listener, and 1.4 start the measurement interval.
• updateGauge: change the text in the gauge. Is called on start (if required), when the user stop scrolling after the delay.
• showGauge: is a function that make the gauge appear if the conditions are fulfilled. Called on start (if requested), or when stop scrolling.
• updateTime: a function called when the user is scrolling down to calculate the result for the getRemainingTime method.

See also:

• jQuery Plugin For Displaying Estimated Time To Read Text
• Lightweight jQuery Plugin For Reading Progress - readingTime
• Creating A Circular Reading Progress Indicator with jQuery and SVG
• Medium Inspired jQuery Read Time Estimating Plugin - readtime

Basic usage:

1. Include the jQuery library and the jQuery Readremaining.js plugin in your project.

<script src="jquery.min.js"></script>
<script src="src/readremaining.jquery.js"></script>

2. Apply the plugin to the body or specified container of the document.

$('body').readRemaining();
$('#elementIdOrClass').readRemaining();

3. Plugin options available.

// Delay for the gauge, 0 if always visible.
showGaugeDelay   : 1000,   

// Show the gauge initially, before the user scroll.        
showGaugeOnStart : false,         

// custom output format
timeFormat       : '%mm %ss left',

// Show remaining time only if is lower than x minutes (multiplied to seconds).
maxTimeToShow    : 20*60,          

// Show remaining time only if is higher than x seconds (Who's that anxious? If is less than 10 seconds... just read).
minTimeToShow    : 10,             

// if left '', the container will be the scrolling element.
gaugeContainer   : '',           

// 'append' or 'prepend' as required by style  
insertPosition   : 'prepend',     

// Enable the console logs. For testing only. 
verboseMode      : false,          

// the element that define the visible scope for the gauge. 
// If left "", the gauge will be visible all along. Can be multiple elements.
gaugeWrapper     : '',        

// Distance between the top of the gaugeWrapper and the point where the gauge will start to appear. 
// Some designs require this.     
topOffset        : 0,              

// Distance between bottom border where the box will appear and the bottom of the element.
bottomOffset     : 0               

4. A public method that returns the remaining time for reading an element with ReadRemaining.js initialized.

foo = $('body').readRemaining('getRemainingTime', { timeFormat: '%m' });

---

This awesome jQuery plugin is developed by Aerolab. For more Advanced Usages, please check the demo page or visit the official website.