Git Product home page Git Product logo

jquery-readtime's Introduction

##Readtime for jQuery

A jQuery plugin that displays the estimated time to finish reading a particular article

gif showing usage of jquery-readtime

Based off of a pen that I wrote. Despite the fact that I rarely use jQuery and almost never use plugins for it, I still thought this would be a fitting use of that script.


####Installation To get it, you can clone this repo, just download the plugin file, or you could install it using Bower like a normal person:

bower install jquery-readtime

By default, it's gonna throw that in your .bower_components/ directory. It can be referenced as follows (be sure to include jQuery before it though):

<script type="text/javascript" src="bower_components/jquery-readtime/jquery.readtime.min.js"></script>

You will likely want to move it or just alter your .bowerrc file to change the location where Bower installs stuff so that you don't have to type out that big long path.

####Usage Usage is dead simple. Just grab the element(s) you want to be injected with the number of minutes remaining and call readTime() on it:

$("#your-element-selector").readTime();

####Assumptions jQuery Readtime assumes that your document is going to be broken up into nice little paragraphs using <p> tags (as it should be if you're writing semantic markup). If it isn't the plugin will not function. Currently working on a fallback for this so that at least something will be displayed.

.readTime() accepts no paramaters. Don't feed it any.

It also only provides you with & updates the number of minutes. It does not provide any UI or even the word "mins" - that's all on you as the developer. It is done this way so that it can be as lightweight as possible & so that it can be injected into anyone's UI.


#####Under The Hood So what is this plugin actually doing? It's simple:

  1. It scans the page for <p> tags.
  2. On page scroll, it checks what <p> tags haven't been scrolled past.
  3. Calculates how many words are in the remaining paragraphs.
  4. Based on the remaining words, it outputs how long it will take to finish reading the article.

Written by Dave Lunny in the beautiful year of 2015.

jquery-readtime's People

Contributors

himynameisdave avatar

Stargazers

Emiliano Gonzalez avatar Andreas avatar

Watchers

James Cloos avatar  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.