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
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.


         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

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

    height: '20px',

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

    padding: "10px",

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

    background: "#e41b17",

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

    width: "100%",

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

   position: 'top',

Be the first to comment

Leave a Reply

Your email address will not be published.


This site uses Akismet to reduce spam. Learn how your comment data is processed.