Where can I find First Time Here? JavaScript component on StackOverflow website?

Question

I need to implement for my Grails website something similar to the orange and closeable dialog that appears at the top of the StackOverflow website when SO discovers that this is your first visit. (for demonstration, just launch your browser in Private / Incognito mode and go to www.stackoverflow.com )

I am mainly interested 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 have a source of code directly?

Answer 1

It really is 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 using 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 main idea.

Answer 2

It's pretty simple, they check to see if the cookie "first_visit = false" is set when you click on the page and display this message if it is missing.

That might help. I answered a similar question. Modal box + check box + cookie

Answer 3

UI - .

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

StackOverflow 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()set display: none;in the notification and, depending on your needs, set cookieso that the message does not appear after rejecting it.

Answer 4

Or easier with jquery:

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

from

    .notification { display:none;}

and

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