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:
- 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.
- 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 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
<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
load.php, which is responsible for inserting
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
that makes a call to
client.js that will actually do all the work to
reconstruct the message boxes and scroll position from the location
of the created URL.
First, you'll need the source.
After that, the only requirement for building in
script on your PATH. This script condenses and takes any number of
Other than that the main idea is to put all the common code
common.js, then type
DISCLAIMER: Nothing on this site is affiliated at all with tinurl, yahoo, AOL, or any other company