JavaScript Bookmarks for a story

Question

I'm working on ePen, an editor for novels which can create an HTML export. To make it easier for readers to follow the story, I thought about supporting bookmarks which are visible on the page (so you can mark part of the text or drag an image somewhere where it sticks). The information should be saved in a cookie and reloaded when the reader returns so they can quickly jump to the page and place where they left off.

What are my options? Does something like that already exists? Have you seen something similar already?

Answer 1

You can use javascript to scroll to a part of the page. So if you have an element you can drag, you can take its coordinates and save that. When someone wants to go to the bookmark, you then scroll to the coordinates you have saved.

window.scrollTo(left, top) is the function to scroll to a part of the page.

Adding dragging behavior would be easy with a framework like jQuery. If you then get the offset and save it somewhere, restoring it would not be that hard.

Answer 2

I've implemented a solution in my Haul story. See bookmarks.js for the JavaScript plus you need a DIV (see bookmarkContainer in the page source) plus the bookmark.css and a couple of scripts from jQuery (jquery-1.4.2.js, jquery-ui-1.8rc2.custom.min.js, jquery.cookie.js, jquery.url_toolbox.js, jquery.timers-1.2.js).

The embedded script in the page (before bookmark.js) defines the name of the cookie for the bookmark information (global variable BOOKMARK_COOKIE).