Simple Customizable jQuery Notification Bar Plugin - peekABar

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

Install and Download:

# NPM
$ npm install jquery-peek-a-bar --save

How to use it:

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

<link href="/path/to/dist/jquery.peekabar.min.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script> 
<script src="/path/to/dist/jquery.peekabar.min.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:

v4.0.x (2024-09-04)

• update dependency

v3.2.0 ... v3.7.0 (2024-07-08)

• update dependency

v3.1.0 (2020-12-16)

• Better deployment process

v3.0.2 (2020-08-28)

• added dist files.

v3.0.1 (2020-08-03)

• updated

v3.0.0 (2019-06-07)

• Upgrade from JSHint to ESLint

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.