Press "Enter" to skip to content

How Long Will It Take To Read An Article? | Readremaining.js

ReadRemaining.js jQuery plugin allows you to show the user how long it will take to read the article considering how fast the user is scrolling.

ReadRemaining.js works more accurately when the scroll element content is homogeneous. If the text size or the complexity of the images changes in different parts of the scroll element, the accuracy will decrease.

How to make use of it:

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

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

2. Apply the supplement to the specified body or 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 generic method that returns the time remaining to read an element with ReadRemaining.js initialized.

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

jQuery Plugin To Display Estimated Reading Time, ReadRemaining.js Plugin/Github


See Demo And Download

Official Website(Aerolab): Click Here

This superior jQuery/javascript plugin is developed by Aerolab. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.