Reading Time
Inspired by Medium, Reading Time is a simple, lightweight jQuery plugin used to display an estimated time to read some text.
See a demo using a remote file
See a demo using multiple remote files
Instructions
Include jQuery and the plugin in the head or footer of your page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="/js/plugins/readingtime.js"></script>Create an element with the class of 'eta' where the estimated reading time will display.
<article> <div class="eta"></div> </article>Optionally you can also create an element with whatever class or ID you want to display the total word count.
The word count will only be displayed if you set the wordCountTarget parameter when initiating the plugin (see below).
<article> <div class="eta"></div> <div class="word-count"></div> </article>Initialize the plugin targeting the class, ID or element that contains the text in which you want to estimate the reading time of.
$('article').readingTime();Options
- readingTimeAsNumber: boolean
If you want to take reading time as integer, you can use this (default: 'false'). - readingTimeTarget: "id / class / element"
A string that defines the ID, class or element that will store the estimated reading time (default: 'eta'). - wordCountTarget: "id / class / element"
A string that defines the ID, class or element that will store the total word count (default: ''). - remotePath: "path"
A string that indicates the path to the remote file (default: null). - remoteTarget: "id / class / element"
A string that defines the ID, class or element in the remote file that contains the text in which you want to estimate the reading time of (default: null). - wordsPerMinute: integer
An integer that defines the words per minute at which to calculate the estimated reading time (default: 270). - round: boolean
A boolean value that indicates whether or not the estimated reading time should be rounded to the closest minute (default: true). - lang: "en / fr / de / es / nl / sk / cz / ru"
A two letter string that indicates the language to be used (default: "en"). - lessThanAMinuteString: string
A string that changes the default "Less than a minute" copy (default: ''). - prependTimeString: string
A string that is prepended before the estimated reading time (default: ''). - prependWordString: string
A string that is prepended before the total word count (default: ''). - success: function(data) {}
A callback function that runs if the plugin was successful (default: `function()`). - error: function(data) {}
A callback function that runs if the plugin fails (default: `function(message)`).
Example:
$(function() { $('article').readingTime({ readingTimeAsNumber: true, readingTimeTarget: $('.reading-time'), wordsPerMinute: 275, round: false, lang: 'fr', success: function(data) { console.log(data); }, error: function(data) { console.log(data.error); $('.reading-time').remove(); } }); });Multiple Articles
Often you will have multiple articles or excerpts on a single page, in which case you would want to iterate through each.
$('article').each(function() { let _this = $(this); _this.readingTime({ readingTimeTarget: _this.find('.reading-time') }); });Using a Remote File
If you want to display the estimated reading time of copy that lives in a remote file, you would initialize the plugin and use the remotePath and remoteTarget options.
In this case, the plugin would display the amount of text contained in the element with the class of "my-article" in the file called "remote.html."
$('article').readingTime({ remotePath: 'path/to/remote/file.html', remoteTarget: '.my-article' });See a demo using a remote file
Using Multiple Remote Files
If you want to display the estimated reading time of copy for multiple articles that live in remote files, you would want to iterate through each article on your page and use data attributes to declare the file and target for each article. Be sure to initialize the plugin on the body and use the remotePath and remoteTarget options.
Here is what your markup might look like (notice the data-file and data-target attributes on each article):
<!-- first article excerpt --> <article data-file="articles/a.html" data-target="article"> <h1>Magna Lorem Quam Nullam</h1> <p>By: Mike Lynch</p> <!-- reading time and word count --> <p><span class="eta"></span> (<span class="words"></span> words)</p> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <a href="articles/a.html" class="btn">Read more</a> </article> <!-- second article excerpt --> <article data-file="articles/b.html" data-target="article"> <h1>Justo Cursus Inceptos Ipsum</h1> <p>By: Mike Lynch</p> <!-- reading time and word count --> <p><span class="eta"></span> (<span class="words"></span> words)</p> <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <a href="articles/b.html" class="btn">Read more</a> </article> <!-- third article excerpt --> <article data-file="articles/c.html" data-target="article"> <h1>Sem Vehicula Dapibus Malesuada</h1> <p>By: Mike Lynch</p> <!-- reading time and word count --> <p><span class="eta"></span> (<span class="words"></span> words)</p> <p>Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <a href="articles/c.html" class="btn">Read more</a> </article>Here is what your JS would look like:
$('article').each(function() { let _this = $(this); _this.readingTime({ readingTimeTarget: _this.find('.eta'), wordCountTarget: _this.find('.words'), remotePath: _this.attr('data-file'), remoteTarget: _this.attr('data-target') }); });
