Twitter-style Notification

Presents a notification, like Twitter does, that pops-down from the top of the screen.

by robhortn

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.min.js"></script>
</head>
<body>
  <div id="menu">
      menu
    </div>
    <div id="alertmsg">
        Test message
    </div>
</body>
</html>

CSS

.alertmsg, .alert-msg-failed {
        font-family:Arial,Helvetica,sans-serif;
        font-size:135%;
        font-weight:bold;
        overflow: hidden;
        width: 100%;
        text-align: center;
        position: absolute;
        background-color: #333F31;
        height: 20;
        color: #F3FDED;
        font: 20px/40px arial, sans-serif;
        opacity: .9;
        display:none;
}

.alert-msg-failed {
        background-color: red;
        color: #fff;
}

#menu {
        width: 100%;
        height: 30px;
        background-color: #b8b8b8;
        display: block;
}

JavaScript

$(document).ready(function() {
    var $alertdiv = $('#alertmsg');
    
    $alertdiv.removeClass('alertmsg').addClass('alert-msg-failed');
    //$alertdiv.removeClass('alert-msg-failed').addClass('alertmsg');

    $alertdiv.bind('click', function() {
        $(this).slideUp(200);
    });

    $("#alertmsg").slideDown("slow"); 
        setTimeout(function() { $alertdiv.slideUp(200) }, 3000);
});