SO style alert header

Question

I apologize if this question is vague, but I want to build a drop down header, very similar to the one on StackOverflow that alerts you whenever you have earned a new badge, or on Twitter whenever a new tweet comes in.

I've been looking around on the internet for a tutorial, but I'm having trouble googling exactly what I'm looking for. I assume there is a way to do this in jQuery, or there may be a jQuery plugin for it, but I haven't had any luck finding one.

The idea would probably be to make an AJAX request every so many seconds, and if a new alert-worthy item is found, display it for the user.

If someone could point me to a resource to learn how to build one, and/or an existing plugin, that would be great.

EDIT: If anyone is curious how I made the actual header using jQuery,

In the success callback function of your ajax:

$("#alertHeader").html("whatever you want to say");    
$("#alertHeader").slideDown("slow");

Where "alertHeader" is the id of your alert div.

The corresponding CSS for the header is:

#alertHeader {
        position:relative;
        background:#313115;
        width:100%;
        height:30px;
        display:none;
        float:left;
        position:relative;
        z-index:10;
    }

#alertText {
    padding-top: 2px;
    margin-left:auto;
    margin-right:auto;
    color: #FFF;
    font-size: 15px;
    font-style: italic;
    text-align: center;
}

Answer 1

You are basically looking for a periodic polling script. You can achieve that by using setInterval() in a function to call itself recursively and do your AJAX request/status check in it.

http://ajaxpatterns.org/Periodic_Refresh

http://enfranchisedmind.com/blog/posts/jquery-periodicalupdater-ajax-polling/

Answer 2

For the UI display part of this, you are looking for a fixed header with a link that uses jQuery or whatever javascript to hide the header when clicked.

Edit: this link is probably a better example.