views:

262

answers:

2

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..

+4  A: 

Do you want something like this?

http://www.tympanus.net/jbar/

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(){

Barry
@Barry exactly like that but i want to give a fade/hide to top effect...
Pandiya Chendur
@Pandiya Chendur - see amended answer
Barry
A: 

you can't insert an item before the <body> tag--your content needs to be within that, so you should probably have a container element surrounding all of the other elements that you can prepend the message to

mportiz08