How can I display a banner on a web page to notify the logged in user they have a new message?

Question

I've been tasked with adding functionality to an existing ASP.net Form Application. Users are authenticated when they log in.

I've been asked to program the application so that when the user logs in, they see a special message notifying them that they have a new message(s).

I think that StackOverflow implements this functionality extremely well. The banners appear at the top of the page in a way that makes them impossible to miss and unobtrusive. Can the Stackers please chime in on how to implement functionality similar to this in my ASP.net application?

Answer 1

Check out Jgrowl http://www.stanlemon.net/projects/jgrowl.html

With a bit of styling, you can use it to implement notifications very similar to StackOverflow pretty easily.

Answer 2

I use this technique on most of my apps. Basicaly I include a div when the user need to be notified of something. The css class goes like this:

 .success {
    z-index:10;
    position:absolute;
    display: block;
    width: 100%;
    height:60px;
    background-color:#D8D4AE;
    border-bottom: 2px solid #000000;
    top:0;
    left:0;
    color:#817C55;
}

To show the div I add it to my page with the following code (ASP.NET MVC):

<%if (TempData["Success"] != null)
          {%>
          <% Html.RenderPartial("Success"); %>
        <%} %>

And you must have the following script in your div to create the slide effect:

$(document).ready(function () {
    $('.success').hide();
    $('.success').css("display", "block");
    $('.success').slideDown('slow');
    $('.success').click(function () {
        $('.success').slideUp('slow');
    });
    setTimeout(function () { $('.success').slideUp('slow'); }, 5000);
});

The code was simplified but this is basically what you need to create a Stackoverflow-like sliding panel