The Stackoverflow alert box, How is it done?

Question

Possible Duplicate:
jQuery alert plugin that produces alerts like Twitter/StackOverflow?

Question says it all.

Can someone point me to an example of how they do the alerts at the top when a new message arrives or someone posts to my answers or I just have a notification..

Thanks.

P.s. I would love a JQUERY solution, but can work with just a js solution.

Answer 1

It's pretty simple and there are plenty of jquery plugins available for the job from here: http://plugins.jquery.com/taxonomy/term/229

I've personally used this plugin and it's pretty simple: http://www.tympanus.net/jbar/

Answer 2

If you don't wish to use a plugin (like me, sometimes)...

When styling it with CSS (for example we'll use <div class="notification">, remember to include these styles:

.notification {
    display: none;
    position: fixed;
}

And here's a very simplified version, similar to what I see on Stack Overflow but a little more straightforward:

$(document).ready(function()
{
    // Some code here to determine whether a notification needs
    // to be displayed, like for a new message, etc

    if (notification needs to be displayed)
    {
        $('.notification').fadeIn();
    }
});

Answer 3

This is quite easy to do in jQuery - this is my version from http://www.odford.co.uk/ and it occurs whenever you rate an entry.

This is the div that we will populate and show

<div id="ajaxcallback" style="top: 0px; position: absolute; display: none;">
</div>

This is the script that does all of that (it also hides it after a short delay - you may not wish to do that).

$("#ajaxcallback").html("<a href='blah'>Some Notice</a>").css({
    top:getScrollTop()+"px"
});
$("#ajaxcallback").show("slow");
window.setTimeout(function () { $("#ajaxcallback").hide("slow"); }, 2000); 

If you are interested in placing it "in view" no matter on where the page is scrolled you'll need something like this - if you want it to only appear right at the top, you don't need this and you can remove the .css({ top:getScrollTop.... stuff from the script.

function getScrollTop() {
    var ScrollTop = document.body.scrollTop;
    if (ScrollTop === 0) {
        if (window.pageYOffset) {
            ScrollTop = window.pageYOffset;
        } else {
            ScrollTop = (document.body.parentElement) ? 
                document.body.parentElement.scrollTop : 0;
        }
    }
    return ScrollTop;
} 

Answer 4

The javascript in question.js is what actually does this, and you can run it through JS Beautifier to make it readable. Or you can just see the beautified version here.

What it does:

When you first press a key, it starts a heartbeat timer, which every 45 seconds will ping for answers to the question you're viewing, and handle the responses. Take a look at heartbeat.answers.ping() and heartbeat.answers.result()

tl;dr: it uses ajax polling.