Skip to content
Continue reading a web page from where you left last time
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE
README.markdown
readon.js

README.markdown

This project is considered experimental

readon.js is a simple JavaScript library to allow people to continue reading where they left last time they visited a page.

This is useful especially for longer pages. I wrote it for The Art of Unix Programming, which also serves as a demo.

Usage

readon.js works by storing the nearest id in localStorage on scroll. It uses IDs as this is the most reliable, pixel positions are dependent on window size, zoom level, etc.

You can use the autoID option if your document doesn't have any id attributes, or doesn't have enough to be accurate.

You need to call readon.init(), which optionally accepts various options in an Object (see below). This should be called after you've done other DOM modifications that may affect the positioning of elements.

Options

  • autoID; default: false
    Automatically generate id attributes for all elements in anchors, minus the [id] selectors. If this value is a string then if will only search for the selectors in

  • anchors; default: 'p[id], h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]'
    Consider matching elements "anchors" to continue from. Things like footnote references, images, and layout content are generally not useful for this. Use *[id] to hook in to any element with an id attribute.

  • textNotify; default: 'Loaded (approximate) position of last view.'
    Text of popup that the last position is loaded. Mainly for i18n.

  • textClose; default: 'close'
    Text of close button in popup. Mainly for i18n.

Classes

Reasonably sensible defaults will be used if the classes are not defined in any style sheet. No styling at all will be added if they're defined.

  • .readon-remembered
    Class added to the remembered element on page load. Default is to give it a yellow background colour.

  • .readon-notify
    Popup notification informing the user that the page scrolled to where the user previously left off. Default is to place it as a fixed element at the bottom.

You can’t perform that action at this time.