Stack Overflow Style Notifications – Using Jquery

Have you seen Stack Overflow? Besides the great content, they have excellent user interface elements that flow seamlessly together. When you visit, an orange notification bar instantly jumps out at you, yet is easily dismissed. I thought this was a great example of notifications done right, so I wondered how I might achieve a similar effect.

First lets take a look into my approach, and then I’ll talk about my implementation.

Download Files View Demo

The Approach

The notifications use an animation to grab the users attention. For the animation I decided to use the jquery javascript library. It is very easy to use and has several pre-built animations such as fadeIn and fadeOut.

Once a user dismisses a notification they should never see it again. To remember when a user dismisses the notification, I decided to use http cookies.  These cookies allow us to save a value in the user’s browser, so when the user clicks dismiss they create a cookie on their local machine. Then the next time they visit the webpage, the page will see that they already have the cookie, and the notification will not be displayed.

Alternatively, if the webpage required a log-in, then I could have stored this data in a database and associated it with a user, but by utilizing cookies I can apply this technique to any web page without the need for any server side scripting (PHP, Ruby on Rails, etc.).

After looking into several ways to get and set cookies I decided to use the jquery cookies plugin which allowed me to dynamically set cookies without a page refresh.

Now that you know my approach to the problem lets take a look at the implementation.

The Implementation

For the fade in fade out animation I used Jquery. You can use the GoogleAPI copy of the library by placing this code in your webpage:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

Next I downloaded the jquery cookies plugin and included it in my webpage. To create a cookie named notificationBar and give it the value “closed” we can use the plugin and execute this command:

$.cookie('notificationBar', 'closed');

After we have created the notificationBar cookie we can get its value by executing this command:

$.cookie('notificationBar');

this command will now return the value “closed”.

Next I added the html for the notification that will be displayed:

<div id = "topannounce" class = "announce" style = "display:none;">
   This Is a Notification from <a href = "http://thinkbohemian.com" target = "_blank">ThinkBohemian</a>
    <a href = "#" onclick = "$.cookie('notificationBar', 'closed');
        $('#topannounce').fadeOut('slow')">X</a>
 </div>

By default it is hidden using:

style = "display:none;"

Using jquery we can fadeIn the notification unless the notificationBar cookie has been set to “closed“.  To accomplish this I added these lines of javascript to the page:

<script type="text/javascript">
 $(document).ready(function(){
   if ($.cookie('notificationBar') != 'closed') {
     $('#topannounce').fadeIn('slow');
   }
 });
 </script>

Then I styled my HTML with a little CSS, and the effect was complete. My webpage has its very own dismissible notification bar:  View the demo of the notification in action.

Richard Schneeman: @ThinkBohemian

I used this effect to notify visitors to  WhySpam.Me, my disposable email service,  about the launch of ShadyEmail.com, the fun way to hide your email and make it questionably suspicious.

–