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.

Related Posts

Star-Rating-System

Create A Simple Star Rating System Using JavaScript

Star Rating System is a small JavaScript library to create a customizable star rating control and gradually improves it from a regular checkbox with numeric values. Star…

File-upload-with-preview

A Simple File Upload That Shows A Preview of the Uploaded Image

File upload with preview aims to address the issue of showing a preview of the uploaded user photo in an easy-to-use package. This is a simple front-end…

Animated-Sliding-Active-Menu

Animated Sliding Active Menu Item Indicator In jQuery | Navigation Menu

Animated Active Menu Indicator – A recent scrolling navigation cursor that moves when you hover over or activate a menu item. Written in jQuery and CSS/CSS3. Must…

iTooltip

[iTooltip] Replace the Original Advanced Tooltip Library

The JavaScript library lets you convert native tooltips into customizable overlays. iTooltip is a pure JS to replace the native tooltip that creates a custom pop-up hint…

Use-Online-Ping

How To Use Online Ping In Vanilla JavaScript Ping.js

Ping.js is a small and simple javascript library for ping response times for servers in pure javascript. Ping.js is a vanilla JavaScript library to supply a web-based…

jquery-fancy-file-uploader

Convert An HTML File Input Type Into a Fancy File Uploader

jQuery Fancy File Uploader is a jQuery extension for converting an HTML file input type into a portable fancy file uploader. Choose from an MIT or LGPL…