Simple Customizable jQuery Notification Bar Plugin - peekABar

Simple Customizable jQuery Notification Bar Plugin - peekABar
File Size: 44 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

peekABar is an extra lightweight jQuery notification plugin which helps you create sticky notification bars with lots of customization options.

Basic usage:

1. Add references to jQuery library and the jQuery peekABar plugin's stylesheet and JS files in the html page.

<link href="path/to/jquery.peekabar.css" rel="stylesheet">
<script src="//"></script> 
<script src="path/to/jquery.peekabar.js"></script> 

2. Display a default notification bar on your web page.

var defaultBar = new $.peekABar();;

3. Pass the customization options to the default bar.

var defaultBar = new $.peekABar({

    // custom html content
    html: 'Your Message Here',

    // for autohide option
    delay: 3000,

    // auto hide after a timeout
    autohide: false,

    // padding
    padding: '1em',

    // background color
    backgroundColor: 'rgb(195, 195, 195)',

    animation: {

      // slide or fade
      type: 'slide',

      // animation speed
      duration: 'slow'


    // additional CSS class
    cssClass: null,

    // CSS opacity
    opacity: '1',

    // top or bottom
    position: 'top',

    // Close the bar by clicking on it.
    closeOnClick: false


4. Callback functions.

var defaultBar = new $.peekABar({
    // Called after the bar is shown.
    onShow: function() {},

    // Called after the bar is hidden.
    onHide: function() {},


5. The method to hide the notification bar.



v2.0.0 (2019-05-25)

  • Upgrade from JSHint to ESLint
  • Add support for Babel transpiling
  • Remove CodeClimate and Travis build files as it needs more research
  • Update README with more info


  • bugfix

This awesome jQuery plugin is developed by kunalnagar. For more Advanced Usages, please check the demo page or visit the official website.