Twitter like status message using jquery

Question

I am using this jquery javascript function to show status message,

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

and my css:

.topbar { 
    background: #476275; 
    border-bottom: solid 2px #EEE; 
    padding: 3px 0; 
    text-align: center; 
    color: white;
    font-family:Arial,Helvetica,sans-serif;
    font-size:135%;
    font-weight:bold;
}​

I am getting my status message but what it does it inserts a div within the body tag instead i want the message to display out of the body(z index) exactly like twitter (ie) just flow my message from top and hide it... Any suggestion.... Hope you got my question..

Answer 1

Do you want something like this?

http://tympanus.net/codrops/2009/10/29/jbar-a-jquery-notification-plugin/

If you download the plugin you can change the speed of the fade in/out by amending lines 28 (for fade in) and 39 (for fade out) from fast to slow

e.g

line 28 _wrap_bar.append(_message_span).append(_remove_cross).hide().insertBefore($('.content')).fadeIn('slow');

line 39

$('.jbar').fadeOut('slow',function(){