A lightweight and ultra-performant jQuery plugin that tells you how many minutes there are left to read in a piece of text. Check out the demo and send me love.
- Get the latest release my downloading the master branch or by running
bower install reading-time-left
- Copy or link to either
readingTimeLeft.js
orreadingTimeLeft.min.js
from thelib
folder to your folder containing your scripts - Add it after you include jQuery
- You're ready to go!
$('#my-container').readingTimeLeft({ options... })
readingTimeLeft()
stores the quantity of words left in every child of the container it has been called on. When scrolling, the plugin detects which children are visible in the viewport and a timechange
event will be called on the container, containing a computed minutesLeft
argument, which you can use to update your UI in the way you want to.
$('#my-container')
.readingTimeLeft()
.on('timechange', function(e, minutesLeft) {
console.log(minutesLeft);
// => 3.453984726
var text;
if (minutesLeft < 1) {
text = 'less than 1 min'
} else {
text = Math.round(minutesLeft) + ' min';
}
window.document.title = text;
// => 3 minutes left
});
This will update the document title to the amount of time left to read in realtime.
readingTimeLeft()
can be customized with three options:
stepSelector
: what type of children to look for in the container.
wordsPerMinute
: how many wpm we are expecting the user to read at.
eventName
: the name of the event that will be triggered on the container. It is also appended as a namespace for the scroll
and resize
events bound on window
.
stepSelector
defaults to*
wordsPerMinute
defaults to270
eventName
defaults totimechange
$('#my-container').readingTimeLeft({
// Will only select <p> and <blockquote> children
stepSelector: 'p, blockquote',
// Consider 400 words per minute of reading time
wordsPerMinute: 400,
// Trigger an event named “minutesleft”
eventName: "minutesleft"
}).on('minutesleft', function (e, minutesLeft) {
console.log(minutesLeft);
});
To destroy an instance of readingTimeLeft()
, call:
$('#my-container').trigger('destroy.readingTimeLeft');
This will remove the data attributes on the children, plus the scroll
and resize
event on window
.
Chrome, Firefox 3.0+, IE6+, Safari 4.0+, Opera 10.0+
1.0
- Initial release