jQuery Header Notification Bar with a Simple Plugin

Yet another ultra lightweight and simple notification plugin for jQuery to show header notification bar. The plugin “Notification Banner” creates a sticky bar on the top/bottom of the webpage. It can be used to show notification messages to user in simple & flexible way.

Moreover, the plugin comes with fully customization options. You can redefine its CSS styles with its configuration options.

Plugin Overview

Plugin: Notification Banner
Author: MANOJ MOHAN
Licence: MIT Licence
Published: August 7, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 3.70 KB

How to Make jQuery Header Notification Bar

1. Load the jQuery and Notification Banner plugin into your HTML document to getting started.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Notification Banner JS -->
<script src="src/jquery.notificationbanner.min.js"></script>

2. After that create a div element in which notifications will be loaded dynamically.

<div class="myHeader"></div>

3. Finally, initialize the plugin and define basic notification text and settings as follows.

$(document).ready(function(){

$(".myHeader").notificationBanner({
         text: "Your notification message goes here...",
         position: "top"
   });

});

Advance Configuration Options for Header Notification Bar

The following are some advance configuration options to create / customize “notification bar”.

Option Description, Default, Type
height

Define the height of notification bar. Default: “20px”, Type: String.

$(".myHeader").notificationBanner({
    height: '20px',
});
padding

Define CSS padding property for bar. Default: “10px”, Type: String.

$(".myHeader").notificationBanner({
    padding: "10px",
});
background

This option used to set the background color. Default: “#7ee68b”, Type: String.

$(".myHeader").notificationBanner({
    background: "#e41b17",
});
width

CSS property of width for notification bar. Default: ‘100%’, Type: String.

$(".myHeader").notificationBanner({
    width: "100%",
});
position

This option define the position of bar. Default: ‘bottom’, Type: String.
Available options: ‘top’ | ‘bottom’

$(".myHeader").notificationBanner({
   position: 'top',
});