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

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