jQuery Scubble

Displays a bubble showing reading time left.

Inspired by iA's blog (scroll to see it in action).

Plugin totally not safe for production, not unit tested, not cross-browser tested and definetly not mobile tested... It's not even commented... Please don't hate me.

• Source: https://github.com/TimPetricola/jquery-scubble
• License: MIT License
• Author: Tim Petricola

Usage

Just open index.html in your browser to see a running example.

HTML:

<div class="scubble"></div>

Javascript:

$('.scubble').scubble();

CSS:

.scubble {
  position: fixed;
}

Basic options

{
  content: 'body', // Element containing the text
  speed: 200,      // Reading speed (in words/minute)
  breakpoints: {   // You can use {min} and {sec} placeholders to show time left
    'more': '{min} minutes left',
    '1:59': '1 minute left',
    '0:59': 'Less than 1 minute left',
    '0':    'Thank you'
  }
}

Even more options

• parser: a function parsing a breakpoint string and returning a number, in seconds. The default format is min:sec

{
  parser: function(breakpoint) {
    var match;
    match = breakpoint.match(/^(?:(\d*):)?(\d*)$/);
    if (!match) {
      throw new SyntaxError("Invalid 'min:sec' format: '" + breakpoint + "'");
    }
    return (parseInt(match[1], 10) || 0) * 60 + parseInt(match[2], 10);
  }
}