sergiosantos.info

blog and works

MileMarker JavaScript - Managing client expectations

26.Jul.2009

How do you usually tell your clients some parts of their web application aren’t still operational? The folks from ThoughtBot had an idea and built a small project – MileMarker – an helper for Ruby on Rails projects.

The idea is to create an overlay on specific parts of the website, that appears when the mouse moves over it. This way the client may see the whole website cleanly, but can’t interact with certain elements. The overlay may also be used to show information like to which milestone that element belongs (therefore the name of the project).

I liked the idea and wanted to be able to use it in non-rails projects, so I extracted the JavaScript code responsible for the functionality: mile_marker.js. I just added the ability to keep the overlay position correct after a page scroll.

The usage is simple. After including the Prototype library (required) and the file mile_marker.js, just add the property mile to an HTML element, like this:

...
<div mile="IMPORTANT TEXT">
Vel duis consequatvel tation dolore et eu. 
Lobortis nulla consequat accumsan nisl veniam 
illum laoreet volutpat nulla feugait te adipiscing.
</div>
...

Vel duis consequatvel tation dolore et eu. Lobortis nulla consequat accumsan nisl veniam illum laoreet volutpat nulla feugait te adipiscing.

Hope the script can be useful to others.

If you enjoyed this post, consider subscribing to my RSS Feed