Giter Club home page Giter Club logo

readingtimeleft.js's Introduction

readingTimeLeft.js

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.

Installation

  • Get the latest release my downloading the master branch or by running bower install reading-time-left
  • Copy or link to either readingTimeLeft.js or readingTimeLeft.min.js from the lib folder to your folder containing your scripts
  • Add it after you include jQuery
  • You're ready to go!

Usage

#### Basic usage
$('#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.

Advanced usage

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.

Defaults:
  • stepSelector defaults to *
  • wordsPerMinute defaults to 270
  • eventName defaults to timechange
Example:
$('#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);
});

Destroy instance

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.

Support

Chrome, Firefox 3.0+, IE6+, Safari 4.0+, Opera 10.0+

Changelog

1.0

  • Initial release

readingtimeleft.js's People

Contributors

christophemarois avatar

Stargazers

Vio Cassel avatar  avatar L avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.