Customizable Notification Bar With jQuery Plugin – peekABar

File Size: 2.81 KB
Views Total: 1361 views
Last Update:May 13, 2024
Publish Date: June 29, 2015
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 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();;

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() {},



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 :
  • v3.6.25
  • v3.6.24
  • v3.6.23
  • v3.6.22
  • v3.6.21
  • v3.6.20
  • v3.6.19
  • v3.6.18
  • v3.6.17
  • v3.6.16
  • v3.6.15
  • v3.6.14
  • v3.6.13
  • v3.6.12
  • v3.6.11
  • v3.6.10
  • v3.6.9
  • v3.6.8
  • v3.6.7
  • v3.6.6
  • v3.6.5
  • v3.6.4
  • v3.6.3
  • v3.6.2
  • v3.6.1
  • v3.6.0
  • v3.5.2
  • v3.5.1
  • v3.5.0
  • v3.4.43


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