jQuery Top Sticky Notification Bar with topper.js

A lightweight jQuery plugin to create top sticky, close-able full width notification bar on the top of the page. The topper.js offers to show multiple types (success, warning, danger & info) notifications to the users.

Plugin Overview

Plugin: Topper.js
Author: Sid van Vliet
Licence: MIT Licence
Published: February 26, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 7 KB

How to Use Top Sticky Notification Bar :

1. Load the jQuery and Topper JS and CSS files into HTML document.

<!--jQuery 3.3.1-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>

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

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

2. Create sticky notification bar on the top of page that will be disappear after the given time.

  title: 'My Alert', //title for the alert message
  text: 'This is my sample info notification.', //the notification text
  style: 'info', //style of the notification
  type: 'top', 
  autoclose: 5000, //disappear after 5 seconds

All available styles are as follows:

  1. success
  2. info
  3. warning
  4. danger

3. If you would like to customize the plugin styles you can add your custom CSS. Just add the styles into topper-custom class.

   /* Your own css */

Then add custom into style attribute.

  title: 'My Alert',
  text: 'This is my custom styled notification.',
  style: 'custom',
  type: 'top',
  autoclose: false

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.