ReadRemaining.js is a jQuery library that 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 displays 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.
Contents
1. Download & include
- Download this library from their Official website.
- Add CSS –
<link href='readremaining.js-readremainingjs/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.6.0/jquery.min.js"></script> <script src='readremaining.js-readremainingjs/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();
3. Few options
Here are some options that help you to customize the behavior.
- showGaugeDelay – Set the delay before the duration visible on the screen e.g. 200.
- showGaugeOnStart – Display time before the page will scroll. It takes a boolean value (true or false), default is false.
- timeFormat – Define the time format using %m (minutes) and %s (seconds) e.g. “%m %s”.
- maxTimeToShow – The time is not visible if it is greater than the defined time e.g. 20*60.
- 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.
});
4. Read remaining time
You need to pass two parameters in the readRemaining() methods.
- The First parameter is
getRemainingTime - and the second is
timeFormatoption.
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 adjusts the time based on the scroll speed.
Its accuracy will drop when the size of the text or complexity of images changes in different parts of the scrolling element.
If you found this tutorial helpful then don't forget to share.