Twitter notification ajax bar, how did they do it?

Question

I'm trying to get that cool, ajax sliding bar that twitter has (its slightly transparent, white).

I tried looking at the html/css, but it seems that they dynamically inject the various DOM layers.

Does someone know how they implemented it?

I really want to learn how to do this.

Answer 1

what sliding bar do you mean? during the status posting?

if so, check JQuery or any other JS framework or library that allows you to play with DOM: http://jquery.com/

ps: any AJAX request indication is just based on the readystate property: http://www.tizag.com/ajaxTutorial/ajaxxmlhttprequest.php

Answer 2

run this code in firebug or on document.ready()

$("<div id='notification'>Notification text here</div>").css({
position:"fixed",
top:"0px",
left:"0px",
height:"20px",
width:"100%",
backgroundColor:"#cccccc",
color:"blue",
padding:"5px",
fontWeight:"bold",
textAlign:"center",
opacity:"0.5"
})
.appendTo("body");

and you should have an instant notification bar...

If you are familiar with jQuery (which I assume you are, because the question is tagged with jquery), you can tweak the CSS and HTML values to suit your needs...

To have it slide Down you would do this:

$("<div id='notification'>Notification text here</div>").css({
position:"fixed",
top:"0px",
left:"0px",
height:"20px",
width:"100%",
backgroundColor:"#cccccc",
color:"blue",
padding:"5px",
fontWeight:"bold",
textAlign:"center",
display:"none", //<-- notice this new value
opacity:"0.5"
})
.appendTo("body");
$("#notification").slideDown("slow"); //<-- this is the animation code

Disclaimer: just a quick thing I whipped up, won't be surprised if it didn't work in IE

Answer 3

Check this here, it's exactly that as a jQuery plugin:

jBar jQuery Notification Plugin

It's nicely configurable.