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

I need to implement for my Grails web site somethi开发者_如何学Cng 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?

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.

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. Modal box + checkbox + cookie

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.

Or even easier with jquery:

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

with

    .notification { display:none;}

and

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