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

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

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')
	});
});