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

The web today

iPhone navigation in Safari
One of the key things in UI design is to present an intuitive UI, which typically means providing controls which match the users expectations of the platform. This is an interesting way of doing the "iPhone flick"
Aurora part 2
The other half of the concept browser video from Mozilla and Adaptive Path. It is all about the social these days
37signals live
Future moves
Mozilla and Adaptive Path have teamed up to create a video with one possible vision for the future web. Very interesting concepts - and Im sure well be seeing many of them in the near future
Browser market share
Time from a giant peice of reality. Very well said this article and what many of us have been thinking. Particularly: "Flash can get to ubiquitous across the entire web with new capabilities in roughly 18 months and the Open Web faces a best case replacem

Donate

If you find the software on this site useful, and/or enjoy using it, please consider making a donation so I can keep developing this software.