Mini-page navigation

I went to sleep and suddenly I had a thought, that I must create a script that lets the user navigate through a web page using a "mini-page" helper on the side of the page, so the user could see where he is in relation to page as a whole. I don't really think it's super helpful to anyway, but I sure did wanted to create it. and 2 days later I have my first prototype using a bunch of wonderful code that others wrote and I incorporated into my solution.

This is only a prototype so far, so I need to clean up some code and write my own drag function because jQueryUi draggable sucks (they don't care about a major 4 years bug) and also it's way too fat of a script with all the shit in it (custom built), So I used this much better plugin &ndash jQuery.event.drag (but i'm gonna write my own because even this one is way to much for such a simple thing I need). The heart of this is the super awesome code html2canvas which I'm using to convert the DOM into a Canvas image I could work with. Took me a while to setup everything right, mainly problems with the dragging handle element, but that's all sort out (I hope!)

To do:

  1. Write my own dragging code (to be a lot smaller)
  2. The html2canvas plugin is very buggy and sometimes you can see the rendered canvas inside the canvas. There is zero documentation for this plugin..
  3. max-height for Canvas doesn't seem to work on my Firefox so I should write something that checked if the mini-page is too height for the viewport and change it's height to fit.
  4. Maybe do a firefox addon or something with this..

Save the below bookmarklet and try it out on web pages:

Bookmarklet


Note: don't use this on Facebook or pages with a TON of DOM..it will be slow. Also pages with frames and iframes might not work very well, but I would say in rare cases. Half the work was naming this thing..I hope to come up with a better name.