notes

This 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. You can see below how to use it, how it works, or how to build it. So, a noted page looks like this.

Here are a couple examples:

Usage

The entire system is controlled by these three bookmarklets:

  • new note -- Create a new note
  • new page -- Create new URL of the annonated page
  • tinyurl -- Create new tinyurl of the annonated page
  • IM tinyurl -- Create and IM a new tinyurl of the annonated page
  • yaho msgr tiny -- Create and send via Yahoo Messenger a new tinyurl of the annonated page
  • mail tinyurl -- Create and automatically mail a new tinyurl of the annonated page

I put these in one menu, such as this (I made this image before adding the third link, and I have to run and then meet someone, so I'll update the image later...use your imagination, and you can pretend a third link, go wild, make it whatever you want, you're in charge):

So this is how this is used.

  • When you want to create an annotation, you first click the new note link in your toolbar (or you can do it right here). You will then be prompted to enter some input; if you enter nothing the prompt will just go away.
    If you do enter text, the next time you double-click the browser window, a message box with that text will appear with its upper-left corner at the location on which you clicked. And, until you double click, a small light-red window will appear in the upper left hand corner of the screen.
    If you click the cancel link, you will cancel the pending message box, and after clicking a few messages you get something like this:
  • When you have added all the annotations you want and have scrolled to the position you'd like the link to finally scroll click the new note in your toolbar (or, again, do it now.) The new location of the page will be set to the new URL that will now on display the annotations you added and will, upon loading, scroll to the position at which you were on the page. These will typically be pretty long, so you may want to use tinyurl directly or my tinyurl to shorten it a bit.
  • You can also use the tinyurl link to create a tinyurl to either view or mail directly and get something like this:

How this works

Everything here is really pretty uncomplicated. When you add a box, you are adding a <div> node with some style to the DOM. Unlike with annotate where I could store information on the location and text of boxes as bindings 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.

Building

First, you'll need the source.

notes.tar.gz

After that, the only requirement for building in the create_bookmarklet script on your PATH. This script condenses and takes any number of plain javascript files and converts them into one bookmarklet. Other than that the main idea is to put all the common code in common.js, then type make.

DISCLAIMER: Nothing on this site is affiliated at all with tinurl, yahoo, AOL, or any other company