Often you will wish to draw attention to a particular elements on a web-page when you are discussing a particular page, reading detailed information, or giving a presentation. I have developed Reader for exactly this, and it has turned out to be an interesting adventure through Javascript events.

Usage

Reader is a Javascript bookmarklet, and like the other bookmarklets I have created, it is extremely simply to use on any web-page you wish:

  • Drag the Reader link below to your bookmark bar (or add it to your bookmarks/favourites by right clicking the link and selecting 'Add bookmark' / 'Add favourite'):
    Reader
  • Load any web-page you wish
  • Click Reader in your bookmark bar
  • Move the mouse around the page and focus will follow. See below for more!

Reader has a number of configuration options which will ensure it integrates seamlessly with any web-site you view, and allow you to customise it to suit your needs. In this way Reader is very effective for highlighting information during a presentation, or simply for focusing your own attention on a complex page.

Reader focuses content by highlighting a the HTML element your mouse is currently focused over. This is done by placing a 'blocker' over all other content on the page, which has a high (and controllable) opacity. When Reader loads, it will automatically detect the background colour of the page that you are viewing and set it's blocker colour to match, ensuring seamless integration. As you move the mouse around the highlighted element on the page will follow.

The following keys can be used to control reader:

  • "Left arrow" - Decrease the opacity of the blocker
  • "Right arrow" - Increase the opacity of the blocker
  • "Up arrow" - Move focus to the currently highlighted element's parent.
  • "Down arrow" - Move focus to the first child of the currently highlighted element.
  • "Shift" - Enable / disable the border around the highlighted element.
  • "[" - Decrease the border size by one pixel.
  • "]" - Increase the border size by one pixel.
  • "Esc" - Quit Reader.

Reader will remember the settings that you select using the above key controls, so when you load Reader the next time the web-page your settings will be as they were (particularly useful for presentations). This setting memory is per domain, so you many have multiple different settings across the web!

The following browsers are supported with Reader:

  • Internet Explorer 6
  • Internet Explorer 7
  • Firefox 2
  • Safari 3
  • Opera 9.2
Article image

Elsewhere on the web

Crazy code
Ever feel a little bit overwhelmed with the number of code libraries that are available? Take a look at this post and feel a bit better about the world.
Visual Event for Opera
Victor Grischenko has wrapped Visual Event up in an Opera extension, making it even easier to use Visual Event in Opera now.
Why Visual Event
Mark Haller of LogicSpot does a superb job of introducing the exact reasons for which I created Visual Event!
Bullet time surfing
What could possibly be cooler than surfing? Surfing with bullet time captures - amazing work from Rip Curl. Seriously - watch the video!
Big changes for Flash
This week Adobe has announced an end to mobile Flash development and Flex now appears to be heading out of the door as well.
Getting started with SVG
Interesting post from the IEBlog about how to get started with SVG. With the level of support in browser now, SVG will hopefully go prime time.