Reading Time for jQuery

The Reading Time jQuery plugin counts the number of ‘words’ (blocks of characters separated by one or more spaces) in a DOM element (e.g. a <div>) with given ID and calculates the estimated reading time of the text.

Download the plugin here:

Click here to visit the official plugin page on the jQuery website.

Default Behavior

This plugin will count the number of ‘words’ (blocks of characters separated by one or more spaces) in a DOM element (e.g. a <div>) with given ID and calculates the estimated reading time of the text.

You can use the plugin for this purpose “as is” (without specifying or changing any settings) if you follow these conventions in your coding:

1. The DOM element containing the text must have an “id” attribute with a unique value.

2. The display element (<p>,<span>,<div>,etc.) where you want the reading time displayed must have an “id” attribute with a unique value.

Here’s an example of a <div> and a <span> element that fit the convention:

<div id=”testReadingTime”></div>
<p>Reading time: <span id=”testCounter”></span> minutes</p>

This is the relative sample plugin use:

<script type=”text/javascript” src=”/jquery-1.2.3.min.js”></script>
<script type=”text/javascript” src=”/jquery.readingTime.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {
$(“#testReadingTime”).readingTime({target:$(“#testCounter”),readingSpeed:200});
});
</script>

Plugin Settings

Like most jQuery plugins, this plugin contains a number of settings that can be configured in order to change the plugin’s behavior. You can change the settings in one of three ways:

1. You can denote the settings you want in an object literal and pass that object into the plugin when you invoke it:

<script type=”text/javascript”>
var settings= {target:$(“#testCounter”),readingSpeed:200};
$(“#testReadingTime”).readingTime(settings);
</script>

2. You can individually alter each of the ‘defaults’ properties of the plugin:

<script type=”text/javascript”>
$.fn.readingTime.defaults.target = $(“#testCounter”);
$.fn.readingTime.defaults.readingSpeed = 200;
$(“#testReadingTime”).readingTime(settings);
</script>

Here is a list of all of the settings and how they are used:

target
———————–
Default value: “”

The target setting is a jQuery object representing the DOM element (e.g. <div>) used to display the reading time.

readingSpeed
———————–
Possible values: every integer > 0
Default value: 200

The estimation is based on the “readingSpeed” value stored in the settings menu.
The value for the parameter should be chosen between a span of 150 words per minute (slightly slower than average)
to 250 words per minute (slightly higher than average).

Public Functions

This plugin contains a function that can be called individually:

calculateTime(), with the parameters:
–target: a jQuery object representing the <textarea>
–readingSpeed: an integer, reading speed in words per minute (typical values are from 150 to 250, default value is 200)

The function can be called in your JavaScript via the plugin, as shown in the example below:

<script type=”text/javascript”>
var cTime= $.fn.readingTime.calculateTime($(“#testReadingTime”),200);
</script>

Leave a Reply

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