Notification alert similar to how stackoverflow functions

Question

How does stackoverflow create the slidedown effect to alert a user of a change ?

Answer 1

Seems like it can be done with AJAX and jQuery. A div at 100% width at the top that slides down and fills with content on receipt of certain information. Are you more interested in the effect..or the back end functionality?

Answer 2

Stack Overflow uses the jQuery framework, which has a method to show a hidden element using a simple animation, something like:

$('#notification-bar').show('slow');

http://api.jquery.com/show/ (check out the demos).

It is fixed to the top of the page using position:fixed in CSS:

#notification-bar { 
   position:fixed;
   top: 0px; 
   left: 0px;
   width: 100%;
}

Answer 3

I think they use a timed event: http://stackoverflow.com/questions/2208626/jquery-timed-event

Which sends an AJAX call to the SO severs: http://api.jquery.com/jQuery.ajax/

And then shows it in the div using the effect Andy E mentioned

Answer 4

There's an very similar implementation using jQuery of StackOverflow effect in the ASP.NET MVC 2.0 Starter Site by the TekPub team on codeplex.

you might want to check it.

Update: i just checked it and the way the TekPub team did it is really neat !. They have a flash helper that is tied to the session. and all what you have to do to call the flash helper methods in the controller to display the flash messages.

here's an example from the Login Action method:

var registered =_authService.RegisterUser(login, password, confirm, "", "", "");
if (registered) {
    this.FlashInfo("Thank you for signing up!");                        

    return AuthAndRedirect(login, login);
} else {
    this.FlashWarning("There was a problem with your registration");
}

and here's an image of how it looks like :

I strongly recommend that you take a look at their code.