Easy Customizable jQuery Notification Bar Plugin

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

peekABar implementation

Install and Download:

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

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

Display a default notification bar on your web page. Pass the customization options to the default bar.

    var defaultBar = new $.peekABar();
    defaultBar.show();
    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
    });
    // Callback functions
    var defaultBar = new $.peekABar({
        // Called after the bar is shown.
        onShow: function() {},
        // Called after the bar is hidden.
        onHide: function() {},
    });

The method to hide the notification bar.

    defaultbar.hide();