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 Preview

How to start using jQuery?

More jQuery Top, Best and New Plugins

Plugin Overview

Plugin: Topper.js
Author: Sid van Vliet
Licence: MIT Licence
Published: 2019-02-26 08:03:28
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 it:

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.

Topper({
  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.

.topper-custom{
   /* Your own css */
} 

Then add custom into style attribute.

Topper({
  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.


*