When designing and developing to the grid, it can be very useful to ensure alignment between various layout components on the page. One easy way to do this is to use a crosshair cursor. Crosshair is a JavaScript bookmarklet which provides exactly this on any web-page you wish.


Using Crosshair is extremely simple:

  • Drag the Crosshair link below to your bookmark bar (or add it to your bookmarks by right clicking the link and selected 'Add to bookmarks/favourites'):
  • Load any web-page you want
  • Click Crosshair in your bookmark bar
  • Move the mouse around the web-page and the crosshair will follow.

The usage of Crosshair is as simple as loading it in a web-page, as described above. The crosshair, including a small information box about the x and y co-ordinates of the mouse on the page.

Supported browsers

The following browsers are supported in Rule:

  • Internet Explorer 7
  • Firefox 2+
  • Safari 2.0.4+
  • Opera 9.2

These are exactly the same as Grid, and there is no IE6 support for exactly the same reason as before.

Article image

Elsewhere on the web