Add A Notification Bar To Your Website Using JQuery

Question

Many websites display notifications or prompts in what is called as information bar or notification bar. Such an information bar typically contains some text, graphics or any other HTML markup along with a close button. The information bar is always visible and is flushed with the top edge of the browser window. Once user closes it it remains hidden for the active session. Such an information bar can be easily developed using jQuery. The remainder of this article explains how.

To begin developing your own information bar, create an empty ASP.NET website and add a web form to it. Then add a folder named Scripts and add a JavaScript file to it. You will be developing a jQuery - InfoBar - plugin to display the information bar. If you are not familiar with jQuery plugins read this article first. Then key in the following code into the JavaScript file :

(function ($) {
    //infobar plugin
    $.fn.InfoBar = function (params) {
        //store div element reference for future use
        var bar = $(this);

        //infobar options
        var options = { 'CssClass': 'InfoBar', 'CloseButtonId': 
                    'InfoBarButton', 'CookieName': 'ShowInfoBar' };
        if (params) {
            $.extend(options, params);
        }

        //function to read cookie value
        var GetCookieValue = function (name) {
            var cookieName = name + "=";
            var cookieArray = document.cookie.split(';');
            for (var i = 0; i < cookieArray.length; i++) {
                var c = cookieArray[i];
                while (c.charAt(0) == ' ') c = 
                       c.substring(1, c.length);
                if (c.indexOf(cookieName) == 0) 
                    return c.substring
                    (cookieName.length, c.length);
            }
            return null;
        }

        //handle scroll event of window to keep infobar always visible
        $(window).scroll(function () {
            if (GetCookieValue(options.CookieName) == null) {
                $(bar).css("display", 'none');
                $(bar).css("marginTop", $(window).scrollTop());
                $(bar).css("display", 'block');
            }
        });

        //hide infobar if user has previously clicked close button
        if (GetCookieValue(options.CookieName) != null) {
            $(bar).css('display', 'none');
        }

        //store a cookie to indicate that user has clicked close button
        $("#" + options.CloseButtonId).click(function (e) {
            $(bar).slideUp('slow');
            document.cookie = options.CookieName + "=false;path=/";
            e.preventDefault();
        });

        //display infobar and apply CSS class
        return this.each(function (index) {
            if (GetCookieValue(options.CookieName) == null) {
                $(bar).addClass(options.CssClass);
                $(bar).css('display', 'block');
            }
        });
    }
})(jQuery);

Let's dissect the above code step-by-step.

(function ($) {
    $.fn.InfoBar = function (params) {
        var bar = $(this);
...

First, you define a jQuery plugin - InfoBar. The plugin can take parameters as a JSON object as indicated by params function parameter. Inside a plugin "this" keyword points to the DOM element on which the plugin has been initialized. You store this reference in a local variable - bar - for later use.

 var options = { 'CssClass': 'InfoBar', 'CloseButtonId': 
                'InfoBarButton', 'CookieName': 'ShowInfoBar' };
if (params) {
   $.extend(options, params);
} 

Then you define a set of configuration options for the plugin. The options include - CssClass, CloseButtonId and CookieName. The CssClass option will indicate the name of CSS class that is to be applied to the base DOM element. Any information bar usually contains a close button and ID of this button can be configured via CloseButtonId option. To remember whether a user has previously closed the info bar or not you will use a Cookie. Name of this cookie can be specified via CookieName option. All the three options mentioned above have default values of InfoBar, InfoBarButton and ShowInfoBar respectively. If you wish to override these defaults you will need to pass the alternate values via params function parameter. You then merge options and params using $.extend() to arrive at the resultant set of options.

var GetCookieValue = function (name) {
  var cookieName = name + "=";
  var cookieArray = document.cookie.split(';');
  for (var i = 0; i < cookieArray.length; i++) {
    var c = cookieArray[i];
    while (c.charAt(0) == ' ') c = c.substring(1, c.length);
    if (c.indexOf(cookieName) == 0) return c.substring
                            (cookieName.length, c.length);
  }
  return null;
}

The GetCookieValue() function is a helper function that accepts a cookie name and returns its value. If the cookie doesn't exist it returns null. Remember that JavaScript cookies are stored in document.cookie property as a semicolon separated pairs. The above code essentially iterates through the available cookies and returns value of a specific cookie.

 $(window).scroll(function () {
  if (GetCookieValue(options.CookieName) == null) {
    $(bar).css("display", 'none');
    $(bar).css("marginTop", $(window).scrollTop());
    $(bar).css("display", 'block');
  }
});

 You need to handle scroll event of the window to keep our info bar always visible to the user. Inside the scroll event handler you essentially check if user has opted to close the infor bar using GetCookieValue() function. If user has not clicked the close button you set the marginTop property of the info bar to scrollTop value. To reduce the flicker you may consider hiding and showing the info bar before and after setting the marginTop property.

 if (GetCookieValue(options.CookieName) != null) {
   $(bar).css('display', 'none');
}

This fragment of code will check for the existence of info bar cookie and hide the info bar accordingly.

 $("#" + options.CloseButtonId).click(function (e) {
  $(bar).slideUp('slow');
  document.cookie = options.CookieName + "=false;path=/";
  e.preventDefault();
});

This code wires an event handler function to the click event of the close button. The click event handler essentially hides the info bar with a smooth sliding up effect. This is done using jQuery slideUp() function. The parameter to slideUp() governs the speed of sliding operation. Then the code sets a info bar cookie using document.cookie property. Notice that the cookie name will be as specified in the CookieName option (ShowInfoBar by default) and its value will be set to false. Also notice that the path of the cookie is set to root of the website and the cookie doesn't have any expiration date. This way the cookie will be active only during the active session of the browser. When user starts a fresh instance of the browser this cookie will not be present. If for some reason you wish to set some expiration date and time explicitly just modify this line of code.

return this.each(function (index) {
  if (GetCookieValue(options.CookieName) == null) {
    $(bar).addClass(options.CssClass);
    $(bar).css('display', 'block');
  }
});

The final piece of code simply adds the CSS class to the DOM element and displays the info bar.

This completes the info bar plugin code. Now let's use the info bar plugin in a web form.

Add a new Style Sheet to the website and add InfoBar CSS class to it:

.InfoBar
{
    background-color: silver;
    color: #333333;
    font-weight: bold;
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0px;
    text-align: center;
    border-bottom-width: 1px;
    border-bottom-color: #666666;
    border-bottom-style: solid;
}

The InfoBar CSS class governs the look and feel of the info bar.

Next, refer jQuery library, info bar plugin and the style sheet file in the default web form.

 <script src="Scripts/jquery-1.4.4.min.js" type="text/javascript">
</script>
<script src="Scripts/InfoBar.js" type="text/javascript">
</script>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />

Add a <DIV> element inside the form as shown below :

<div id="infobarDiv">
    <table cellpadding="10" width="100%" border="0">
    <tr>
        <td align="center" width="95%">This is InfoBar developed 
        in ASP.NET and jQuery.
        </td>
        <td align="left" width="5%">
          <input id="Button1" type="button" value="Close" />
        </td>
    </tr>
    </table>
</div>

The infobarDiv element essentially displays a message and close button.

To complete the web form, add the following script block immediately after the script references :

<script type="text/javascript">
    $(document).ready(function () {
        $("#infobarDiv").InfoBar({ 'CssClass': 'InfoBar', 
         'CloseButtonId': 'Button1', 
         'CookieName': 'ShowInfoBar' });
    })
</script>

The above script block handles the ready() jQuery event and initializes the info bar plugin on infobarDiv element. Notice how parameters are passed in JSON format.

That's it! Run the web form and you should see something like this :

You can use the info bar plugin in individual web forms or put it in a master page.