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

WTFJS
Javascript is a great and flexible language - but it sure does have its quirks. Collection of the funny ones...
Bing Maps
The mapping and interaction team at Microsoft are really stepping up to the plate with Bing Maps. Very interesting talk about how they are bringing various pieces of their technology together.
Everything is amazing
But nobody is happy... Great commentary on how we take for granted the achievements of mankind.
Subtle reality
Interesting article which looks at how a UI design can be crafted to be more realistic, a key point in engaging your users
Increase your creativity
Nice "trick" to get the two sides of your brain talking (or so the theory goes). Time for a game of pong...
Firefox Mobile 1.0
Congratulations to the team working on Firefox Mobile. Given that Webkit completely rules the roost for mobile browsers, it is nice to see some competition.

Donate

If you find the software on this site useful, and/or enjoy using it, please consider assisting my beer fund as a way of thanks!.