CODEWITHSUNDEEP
jquerytwittermessagestatus
ACP
ACP

Reputation: 35268

Twitter like status message using jquery

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

Upvotes: 1

Views: 2034

Answers (2)

codingbadger
codingbadger

Reputation: 44024

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

Upvotes: 3

mportiz08
mportiz08

Reputation: 10328

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

Upvotes: 0

Related Questions