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="//code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="path/to/jquery.peekabar.js"></script> 

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

var defaultBar = new $.peekABar();
defaultBar.show();

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.

defaultbar.hide();

Changelog:

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

2015-12-25

  • bugfix

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