jQuery Plugin To Display Reading Time Of A Specific Article - readingTimeLeft.js

File Size: 8.65 KB
Views Total: 934
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Display Reading Time Of A Specific Article - readingTimeLeft.js

readingTimeLeft.js is a jQuery plugin which calculates and displays the remaining reading time to finish reading a particular article. By default, the plugin considers 270 words per minute of reading time.

Basic usage:

1. Create an empty DIV element to place the remaining reading time.

<div id="time-left"></div>

2. Download and include the readingTimeLeft.js plugin after jQuery JavaScript library.

<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="lib/readingTimeLeft.js"></script>

3. Call the function on the target container and output the estimated reading time inside the DIV element you just created.

$('#container').readingTimeLeft()
  .on('timechange', function(e, minutesLeft) {
    var text = minutesLeft < 1 ? 'less than 1' : Math.round(minutesLeft);
    $('#time-left').text(text + ' min left');
  })
$(window).trigger('scroll');
});

4. Plugin's default options.

$('#container').readingTimeLeft({

  // type of children to look for in the container
  stepSelector: '*',

  // Consider 270 words per minute of reading time
  wordPerMinute: 270,

  // trigger an event named 'timechange'
  eventName: 'timechange'
  
});

This awesome jQuery plugin is developed by christophemarois. For more Advanced Usages, please check the demo page or visit the official website.