Geek Answers Handbook

SO style warning header

I apologize if this question is fuzzy, but I want to create a drop-down header, very similar to the one found on StackOverflow, which alerts you when you earn a new icon, or on Twitter whenever a new tweet appears.

I searched the textbook on the Internet, but I have problems finding on the Internet exactly what I am looking for. I guess there is a way to do this in jQuery, or there might be a jQuery plugin for it, but I was not lucky to find it.

The idea would probably be to make an AJAX request every so many seconds, and if a new item worthy of attention is found, display it for the user.

If someone can point me to a resource to find out how to build it and / or an existing plugin, that would be great.

EDIT: If anyone is interested in how I made the actual header using jQuery,

In the success callback function of your ajax:

$("#alertHeader").html("whatever you want to say"); $("#alertHeader").slideDown("slow");

Where "alertHeader" is the identifier of your alert div.

Appropriate CSS for the header:

 #alertHeader { position:relative; background:#313115; width:100%; height:30px; display:none; float:left; position:relative; z-index:10; } #alertText { padding-top: 2px; margin-left:auto; margin-right:auto; color: #FFF; font-size: 15px; font-style: italic; text-align: center; }
+6
javascript jquery ajax
source share
2 answers

Basically you are looking for a periodic polling script. You can achieve this by using setInterval() in a function to call yourself recursively and execute your AJAX request / status in it.

http://ajaxpatterns.org/Periodic_Refresh

http://enfranchisedmind.com/blog/posts/jquery-periodicalupdater-ajax-polling/

+5
source share

For the display portion of this user interface, you're looking for a fixed title with a link that uses jQuery or any other javascript to hide the title when clicked.

Edit: this link is probably the best example.

+2
source share

More articles:


All Articles