How do I make an info bar at the top of the page like on stackoverflow.com?

Question

Im seriously jealous of the person who designed this website and in particular the 'info' bar at the top of the page that notifies you every so often.

I very much want this on my website, does anyone know of a downloadable script that resembles something like this? (php)

An answer from the stackoverflow design team would be nice! ;)

Answer 1

This will largely be done with jQuery. It's just a matter of periodically querying the server:

setInterval(function(){
  $.post("getUpdates.php", function(response){
    showInfoBar(response);
  });
}, 10000);

That would request updates every 10 seconds. You could do this once the page loads too. As for the PHP code in getUpdates.php:

if (!isset($_SESSION["userid"]))
  die("You are not logged in");

$updates = getUpdatesForUser($_SESSION["userid"]);
if ($updates) {
  print json_encode($updates);
} else {
  print "No updates";
}

As for the get-updates, you can do that as a table in your database:

userid |         time        | updatemsg
-------------------------------------------------------------
   28  | 2009-08-21 12:53:02 | You've received the 'uber' badge.

Getting a users updates is as easy as querying this table for all new updates. You could create a field to indicate when an update has been sent, and should not be sent again.

This is all very thrown-together, but should give you a very basic idea of how to accomplish it.

Answer 2

View -> Source

            <div id="topbar">

                <div id="hlinks">
                    <a href="/users/recent/144496"><img src="http://sstatic.net/so/img/replies-off.png" width="15" height="10" title="you have no new replies"></a>
                    <a href="/users/144496/martin" >Martin</a>&nbsp;<span class="reputation-score" title="reputation score">741</span><span title="9 bronze badges"><span class="badge3">&#9679;</span><span class="badgecount">9</span></span>
<span class="link-separator">|</span>

                    <a href="/users/logout?returnurl=%2fquestions%2f1320043%2fthe-stackoverflow-info-bar-at-the-top-of-the-page">logout</a>
<span class="link-separator">|</span>

                    <a href="/about">about</a> <span class="link-separator">|</span> <a href="/faq">faq</a>
                </div>
                <div id="hsearch">
                    <form id="search" action="/search" method="get">
                    <div>
                        <input name="q" class="textbox" tabindex="1" onfocus="if (this.value=='search') this.value = ''" type="text" maxlength="80" size="28" value="search">

                    </div>
                    </form>
                </div>
            </div>

Then check out the CSS.

Answer 3

You can achieve the same functionality with jQuery framework. Its really easy to do.

Answer 4

It's a million times easier than it looks.

You just use jQuery, have a div that is width 100%, left : 0; top : 0; and then show it with some jQuery animation function.