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: January 11, 2024
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',
});

Leave a Comment

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

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...