« | Main | »

June 06, 2009

notes is a system of bookmarklets for making notes on web pages and then creating a link to send other people that will display those notes and resume your scroll position. The looks are similar to those found on the greasemonkey script annotate, but this doesn't require the viewer of the link have that script installed or greasemonkey installed at all. So, a noted page looks like this.
The entire system is controlled by two bookmarklets found on this page, new note and new page. You create annotations with new note and then you generate the final link with new page.

Here are a couple examples: So, how it works...everything here is really pretty uncomplicated. When you add a box, you are adding a <div> tag with some style to the DOM. Unlike with annotate where I could store information on the location and text of boxes as binding in the javascript environment, I had to reference them directly from the DOM for this, because on each invocation of the script, new values were taking on -- hence, each call is stateless other than the state in the DOM.

To construct the final URL, I go and grab all the relevant <div>s with class name _mbox, grab the x and y coordinates in the style, and the text in a <div> contained within and create another url. That url (target URL) and the rest of these values are passed to load.php, which is responsible for inserting the common.js and client.js scripts either in the HEAD element of the target URL or creating a new HEAD element and putting it in there; and insterting a script tag that makes a call to clientMain(), contained in client.js that will actually do all the work to reconstruct the message boxes and scroll position from the location of the created URL.

Posted by jeff at June 6, 2009 01:54 AM