I'd say you definitely should check out one of the JS frameworks that are around. I haven't used JQuery but I have heard good things about it. I have used MooTools and it makes effects very easy.
Well, as for shifting the content down, you could have a div that is already there but hidden, then simply append/insert the correct value where the badge name should be and use the slideout funtion when it is supposed to appear, which should correctly shift the content down. I do believe that you could use jQuery to create this, although I'm not sure how they achieve the live effect-my first guess would be that it polls the server every now and then, but that would seem a bit ineffective. I'm not entirely sure what the better alternative would, however, since an interrupt style system wouldn't really work with client-side js(as far as I know).
I'd start by creating the element with CSS/HTML.
HTML
<div class="message"><p>You've earned...</p><div class="close">x</div></div>
CSS
.message { position:absolute/*or fixed*/;top:0;left:0;background-color:orange;width:100%;height:30px}
.close{width:20px;height:20px;float:right}
Something like that anyway. Play with it. Once it looks all pretty you have to figure out how to make it appear when you want. I'd probably do this on the backend with PHP -- if the user has not acknowledged that he's received the message, then just print out that HTML. You'd do this by querying a database and looking at some "acknowledged" flag.
Then, you'd use AJAX when they click the X which would call another backend script which would set the acknolwedged flag, and then you can fade out the bar. For that, I'd use jQuery.
jQuery would allow you to whip up a solution pretty quickly. $("#fancyBar").fadeIn(); to show it, and $("#fancyBar").fadeOut(); to hide it. As for your element itself:
<div id="fancyBar"><p>You're a teacher!</p></div>
That text could be generated by some server-side logic:
<?php
$alerts = get_alerts();
print json_encode($alerts);
?>
The ways to accomplish this are staggering. Best to just jump in feet-first.
Here's an example that pops up a top toolbar when the document is ready.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<style>
body {
margin:0px;
padding:0px;
}
#StackOverflowBar {
display:none;
border-bottom:1px solid #000000;
background:#444444;
padding:2px;
color:#FFFFFF;
font-weight:bold;
text-align:center;
font-size:1.1em;
}
</style>
<script>
$(function() {
$("#StackOverflowBar").append("<div>toolbar/announcement content</div>").fadeIn();
});
</script>
<div id="StackOverflowBar"></div>
Here's some content that will be below the toolbar.
</body>
</html>
Explanation:
The script included is jQuery, here's a link that goes over the benefits of lettings Google host it for you. Obviously there are drawbacks but I think the benefits outweigh them.
In the script section, the $() function call is an alias for the jQuery() function, and when you pass a function as an argument it runs it at document ready. What the script is doing is finding an element with an ID of "StackOverflowBar" and appending HTML to it and then running the fadeIn() function on that same element.
You could also include a <noscript> section for users that don't have JavaScript enabled if you still want to show the alert to them.
A good idea is use a session variable. So you can do something like . In frameworks like codeigniter you can use the Flashdata, and the data will only be available for the next server request. http://codeigniter.com/user_guide/libraries/sessions.html