stackoverflow style notification bar

Question

Possible Duplicate:
Notification alert similar to how stackoverflow functions

The notification bar the top, which shows things like ' you earned xyz badge". How is it done? I am trying to create someting similar in my rails app. I use blueprint for my layout, it's a standard single column 950px layout, with everything from the header down to the footer is in a container div.

Thanks

Answer 1

You can do it pretty easily with a fixed position element that has a higher z-index than any other element on your page:

<div id="notification">
    You've earned xyz badge
</div>
<!-- rest of your site's markup -->

And with the following CSS:

#notification {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: yellow; 
}

Then it's just a matter of checking on page load if you need to create and display the #notification:

$(window).load(function(){
    if(showNotification){
        $('body').append(
            $('<div id="notification">You\'ve earned xyz badge</div>');
        );
    }
});