How can I make something similar to that cool bar on the top of stackoverflow that pops up when you get a new badge?

Question

When you get a new badge on stackoverflow.com, a bar appears at the top of the screen informing you of your achievement. It sticks around until the user closes it.

I rather like that system of informing the user about new news related to the site or their account. It's fairly unintrusive, but still clearly communicates the information. Even if all users receive a notification this way, it sticks around for each user until they have acknowledged seeing it.

I'm running a system using Ruby on Rails on a PostGres database. What's the best way to implement a similar system on my setup?

Edit: Just to clarify, I'm interested both in the server side and client side of the setup.

Answer 1

You could use something like the jquery popup bubble extension: http://www.farmcode.org/post/2009/04/06/jQuery-popup-bubble-extension.aspx

Answer 2

The effect can be accomplished with jQuery and the slideDown method (http://api.jquery.com/slideDown/). Set an onClick event to make the element slideUp, hide, or hit an AJAX call to let you know that the user got the message and dismissed it.

You could set the contents of the element (I'd go with a div) via an AJAX call, or you could simply populate the div with the appropriate message when generating your page, start the div off as hidden, and then kick off the slideDown method when the page load is complete via a $(document).ready definition (http://think2loud.com/jquery-document-ready-howto/).