Easy Customizable jQuery Notification Bar Plugin

Kunal February 10, 2023

ADN
easy-customizable-jquery-notification-bar-plugin

Live Preview Download

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();

 

Next: Benchmark Email Marketing tool Pros & Cons

also view other related posts,