jQuery Top Notification Bar

1. Introduction

Topper.js is a lightweight jQuery plugin to create top sticky notifications on the website. The plugin offers 4 types of notifications: success, warning, danger, and info. Types have a different dedicated color but you can easily customize them using CSS styles.

2. Plugin Overview

Demo

3. How to install and use Topper.js jQuery plugin

In order to install Topper.js jQuery plugin, follow below steps.

1. Load jQuery and Topper.js assets (CSS styles and JS files) into your website:

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

<!--Topper Js-->
<script src="js/topper.js"></script>

<!--Topper CSS-->
<link rel="stylesheet" href="css/topper.css">

2. To show notification simply run Topper() function with specific parameters:

 Topper({
    title: 'My Alert',
    text: 'This is my sample notification.',
    style: 'danger',
    type: 'top',
    autoclose: true,
    autocloseAfter: 2500
});

Topper.js plugin comes with multiple options. You can provide title and description of your notification, choose the style (success, warning, danger, and info) or set the auto-closing after a specific time.

4. Conclusion

In this article, we presented Topper.js jQuery plugin designed to present a notification bar at the top of the website. Notifications are useful and commonly-used components. They show users that a specific action is finished with success or failure.