Customizable Plugin for a Notification Bar | jquery.peekABar

jquery-notification-peekabar

jquery.peekABar is a jQuery notification bar extension with customization options. peek bar is a lightweight notifications plugin that helps you create pinned notification bars with loads of customization options.

jquery notification message box, jquery notification message example, toast notification jquery, notification jquery, pop up alert notifications using jquery

How to make use of it:

Install and Download:

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

1. add references to the jQuery library and the jQuery peek bar plugin’s stylesheet and JS information within the HTML web 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 net 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 features.

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

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

});

5. The technique to cover the notification bar.

defaultbar.hide();

Simple Customizable jQuery Notification Bar Plugin, jquery.peekABar Github, jquery notification popup codepen, jquery notification bubble, best alert message jquery


See Demo And Download

Official Website(kunalnagar): Click Here

This superior jQuery/javascript plugin is developed by kunalnagar. For extra Advanced Usages, please go to the official website.