jQuery Top Notification Bar with Auto Hide

The “peekABar” is a lightweight jQuery plugin to create a customizable top notification bar with auto hide option. The plugin allows you to create a dynamic notification bar with a custom background, padding, CSS class, and callback functions. Therefore, you can easily create a top/bottom fixed notification bar with sliding or fading animation. Similarly, you can also control bar opacity, animation delay, and position with its configuration options.

How to Create Top Notification Bar with Auto Hide

In order to create top notification bar, you need to getting started with “peekABar” plugin. So, in the very first step, load the jQuery (JavaScript library) and plugin JS file into the head tag of your HTML page.

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- peekABar JS -->
<script src="src/js/peekabar.js"></script>

Basically, the notification bar doesn’t need any HTML as it renders dynamically. So, you can trigger the jQuery Flash message box to show notifications bar on any JavaScript event (like load, click, hover, etc). Here we will create a button to attach a notification bar with that on the click event. Similarly, you can initialize the bar on various elements and events according to your needs.

<button class="btn-show">Show Bar</button>

You can set an ID attribute or a specific class name with your element that will trigger the notification. Anyhow, in the above HTML button I used the "btn-show" class name to initialize the plugin with this class selector.
After creating HTML button, add the following CSS styles for the notification bar.

.peek-a-bar{
     margin:0;
     position:fixed;
     width:100%;
     left:0;
     right:0;
     text-align:center;
     color: #fff
}

In the final step, you need to initiailize the plugin in jQuery document ready function. For this, construct peekABar with "autohide" true. Likewise, you can also set custom value for padding and background color as described in the following code:

   $(document).ready(function(){
       
  var autohideBar = new $.peekABar({
    autohide: true,
    padding: '2em',
    backgroundColor: 'green',
  });
       
  $('.btn-show').click(function () {
    $('.peek-a-bar').hide(); 
    autohideBar.show({
    html: 'Welcome to FrontendScript.com ',
   });

  });
  
});

Here, the important thing is the notification text content that you can define in the “html” option for the show method. In the above code, I initialized the notification on the click event. Similarly, you can initialize on any JavaScript event and update notification content simultaneously.

Plugin Configuration Options

The following are some advanced configuration options to create / customize notification bar.

var bar = $.peekABar({
	html : "Custom Message",
});

var bar = $.peekABar({
	delay : 2000,
});

var bar = $.peekABar({
	autohide : true,
});

var bar = $.peekABar({
	padding : '2em',
});

var bar = $.peekABar({
	backgroundColor : 'rgb(195, 195, 195)',
});

var bar = $.peekABar({
	opacity : 1,
});

var bar = $.peekABar({
	cssClass : "",
});

var bar = $.peekABar({
	position : 'top',
});

var bar = $.peekABar({
	closeOnClick : true,
});

Callback Functions and Methods

The plugin allows you to execute a custom callback function with two possible options. So, you can run a function when the notification bar appears or disappears. Similarly, the plugin comes with two methods, show() and hide(). The example of callbacks and methods is as follows:

//function to run when notification bar show
onShow: function() {
        console.log('called after bar is shown');
    },

//function to run on hide
onHide: function() {
        console.log('called after bar is hidden');
    }

// Show the bar
bar.show();

// Hide the bar
bar.hide();

That’s all! hopefully, you have successfully created a top notification bar with auto hide functionality using this jQuery plugin. If you have any questions or suggestions, let me know by comment below.