Does jQuery have a plugin to display a "message bar" like the Twitter "wrong password" bar at the top of screen?

Question

Twitter will pop down a message bar at the top of the screen say "Wrong password" and after 10 seconds, it will slide up and disappear. Chrome also shows "Do you want to save the password" message box using such a way.

Does jQuery have a plug in to do that already? Does it also work in IE 6? Because usually, the display of relative to the viewport (using position: fixed) will not work on IE 6. thanks.

Update: thanks for the nice solutions -- I deliberately wanted it to work (1) even when the user has scrolled down the page, that it will show at the top of the window screen and (2) the bar might be chosen to display at the bottom of window screen instead (as an option)... and if it works on IE 6 then it is even better... poor programmers nowadays...

Answer 1

You can do this with just a few lines of code, like this:

​​​​function topBar(​​​message) {
  $("<div />", { 'class': 'topbar', text: message }).hide().prependTo("body")
      .slideDown('fast').delay(10000).slideUp(function() { $(this).remove(); });
}

Then just give the class you use some styling, for example:

.topbar { 
    background: #990000; 
    border-bottom: solid 2px #EEE; 
    padding: 3px 0; 
    text-align: center; 
    color: white;
}​

You can view a working demo here, tweak as needed :) This creates a <div> on the fly, adds it to the top of the body, so no funky positioning to worry about, this should be just fine in IE6. When it's finished it'll slideUp and remove the <div> it created to cleanup. You can add a click handler to remove it instantly, etc, whatever your needs are.