How to create a dashboard at the top of the page, for example, on stackoverflow.com?

Question

I seriously envy the person who developed this site and, in particular, the info panel at the top of the page that notifies you so often.

I really want this on my website, does anyone know a downloadable script that resembles something like this? (PHP)

The answer from the stackoverflow development team will be nice !;)

Answer 1

This will mainly be done using jQuery. This is just a question of a periodic server request:

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

This will request updates every 10 seconds. You can do this as soon as the page loads. Regarding 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 get-updates, you can do this as a table in your database:

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

Getting updates for users is as simple as querying this table for all new updates. You can create a field that indicates when the update was sent and should not be resubmitted.

All this is very confused, but should give you a very general idea of ​​how to implement it.

Answer 2

Browse → 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 the CSS.

Answer 3

This is a million times lighter than it sounds.

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

Answer 4

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