Where can I find the "First Time here?" JavaScript component of the StackOverflow website?

Question

I need to implement for my Grails web site something similar to the orange and closable dialog that appears on the top of the StackOverflow website whenever SO detects that it is your first visit. (for a demo, just start your browser in Private/Incognito mode and go to www.stackoverflow.com)

I am interested mainly in the front-end component.

Do you know where I can find a JavaScript/CSS/HTML library and/or code that will do the job? Or maybe you do have the code source directly?

Answer 1

It is really as simple as creating a CSS style for a div, something like this:

div.notification
{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 20px;
    z-index: 1000;
    /* style it the way you want; background, font-weight etc. */
}

and then when you want to show a notification, you add a div with this class to the DOM. For example, with jQuery:

function displayNotification(text)
{
    var notification = $('<div></div>')
        .addClass('notification')
        .text(text)
        .click(function() { notification.remove(); });
    $('body').append(notification);
}

displayNotification('Hello World!');

Of course you can make it more advanced, but this is the basic idea.

Answer 2

It's pretty simple, they check if a "first_visit=false" type of cookie is set when you hit the page, and display that message if it's not.

This might be of help.. I responded to a similar question. http://stackoverflow.com/questions/1604114/modal-box-checkbox-cookie/1604193#1604193

Answer 3

The UI paradigm is called a flash message or notifier.

http://rubypond.com/articles/2008/07/11/useful-flash-messages-in-rails/

StackOverflow uses the following markup and CSS:

<table id="notify-table">
  <tbody><tr style="" class="notify">
    <td class="notify">
      1 new answer has been posted - <a onclick="heartbeat.answers.update()">load new answers.</a>
    </td>
    <td class="notify-close">
      <a onclick="notify.close()" title="dismiss this notification">×</a>
    </td></tr>
  </tbody>
</table>

#notify-table {
color:#735005;
font-weight:bold;
left:0;
position:fixed;
top:0;
width:100%;
z-index:100;
}

notify.close() would set display: none; on the notifier and, depending on your needs, set a cookie so that the message does not appear after it has been dismissed.

Answer 4

Or even easier with jquery:

$('div.notification').fadeIn();

with

    .notification { display:none;}

and

$('div.notification').fadeOut(function() { $(':parent .close').click(); });