Display estimated reading time with ReadRemaining.js

The ReadRemaining.js is a jQuery library which shows readers how much time is left to finish reading an article.

The estimated time will be different for each user because it calculates time-based on the speed at which the user is scrolling the page.

This display a small tooltip at the bottom which is customizable with options e.g. set the delay before it will visible on the screen, time format, set time range etc.

Display estimated reading time with ReadRemaining.js


Contents

  1. Download & include
  2. Example
  3. Few options
  4. Read remaining time
  5. Conclusion

 

1. Download & include

<link href='readremaining.js/css/rr_dark.css' rel='stylesheet' type='text/css'>
  • Now include the scripts at the end.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src='readremaining.js/src/readremaining.jquery.js' type='text/javascript'></script>

 

2. Example

HTML

<style>
 .content{
  width: 80%;
  margin: 0 auto;
 }
</style>

<div class="content rrlight">

 <!--  Add your content -->

</div>

jQuery

Call readRemaining() method on <body>.

$('body').readRemaining();

Demo

Scroll the page.


 

3. Few options

Here are some options that help you to customize the behavior.

  1.  showGaugeDelay – Set the delay before duration visible on the screen e.g. 200.
  2.  showGaugeOnStart – Display time before the page will scroll. It takes a boolean value (true or false), default is false.
  3.  timeFormat – Define the time format using %m (minutes) and %s (seconds) e.g. “%m %s”.
  4.  maxTimeToShow – The time is not visible if it is greater than the defined time e.g. 20*60.
  5.  minTimeToShow – The time is not visible if it is lower than the defined time e.g. 10.

Example

$('body').readRemaining({
 showGaugeDelay : 200, // Delay before showing the indicator.
 showGaugeOnStart : true, // Show the gauge initially, even before the user scroll.
 timeFormat : '%mm %ss', // Will replace %m and %s with minutes and seconds.
 maxTimeToShow : 20*60, // Only show time if is lower than x minutes (multiplied to seconds).
 minTimeToShow : 10, // Only show time if is higher than x seconds (If it's less than 10 seconds... just read).
 gaugeContainer : '', // The element where the gauge will append. If left '', the container will be the same scrolling element.
 insertPosition : 'prepend', // 'append' or 'prepend' as required by style
 verboseMode : true, // Enable the console logs. For testing only.
 gaugeWrapper : '', // Optional, the element that define the visible scope for the gauge. If left "", the gauge will be visible all along.
 topOffset : 0, // Distance between the top of the gaugeWrapper and the point where the gauge will start to appear. Some designs require this.
 bottomOffset : 0 // Distance between bottom border where the box will appear and the bottom of the element.
});

Demo

Scroll the page.


 

4. Read remaining time

You need to pass two parameters in the readRemaining() methods.

  1. The First parameter is getRemainingTime
  2. and the second is timeFormat option.

Example

$(document).ready(function(){

 var remainingMinutes = $('body').readRemaining('getRemainingTime', {timeFormat : '%m'});
 
 console.log("time : " + remainingMinutes );

});

 

5. Conclusion

This light plugin tells the reader how much time is remaining to finish the article and cleverly adjust the time based on the scroll speed.

Its accuracy will drop when the size of the text or complexity of images change in different parts of the scrolling element.

Related Post

Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *