Customizable Notification Bar With jQuery Plugin – peekABar

Other
File Size: 2.81 KB
Views Total: 706 views
Last Update:January 01, 1970
Publish Date: January 01, 1970
Official Website: Go to website
License: MIT
Plugin Author:
Demo    Download

A Free jQuery Plugin with Customizable Notification Bar in jQuery Plugin build by peekABar. its style same as bootstrap button & notifications. this is very lightweight jQuery notification plugin. it helps you create sticky notification bars with lots of customization options. The Ultimate Notification Bar Plugin built on top of jQuery

How to use :

Installation of plugin.

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

Add jQuery Library with peekABar jQuery Script and CSS file.

<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>

Add Html for call button.

<button class="btn btn-success btn-default-show">Default Bar</button>
  <button class="btn btn-danger btn-default-hide">Hide the Default Bar</button>
  <button class="btn btn-success btn-autohide-show">Auto Hide Bar</button>
  <button class="btn btn-success btn-custom-show">Custom Bar</button>

Display a default notification bar on your page.

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

Add 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

});

Callback functions.

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

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

});

Done

Thanks for make jQuery plugin is developed by For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.

Related jQuery Plugins

You Might Also Like