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.
$(".myHeader").notificationBanner({
position: 'top',
});
|
Similar Code Snippets:
Queen Elizabeth Sketch in CSS
Create Scratch Card using JavaScript & HTML5 Canvas
Dynamic Star Rating in JavaScript
Bootstrap 4 Modern Pagination with jQuery
Bootstrap Circle Progress Bar Animation
Bootstrap 4 Tags input Autocomplete - jQuery Suggestags
jQuery Circular Progress Bar with Text Counter
Bootstrap Notification Bar with Close Button
jQuery Circular Progress Bar with Percentage
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.