Saturday, June 22, 2024
HomejQueryEasy Customizable jQuery Notification Bar Plugin - peekABar

Easy Customizable jQuery Notification Bar Plugin – peekABar

peekABar is an additional light-weight jQuery notification plugin which helps you create sticky notification bars with numerous customization choices.

Set up and Obtain:

$ npm set up jquery-peek-a-bar --save

Tips on how to use it:

1. Add references to jQuery library and the jQuery peekABar plugin’s stylesheet and JS recordsdata within the html web page.

<hyperlink 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. Show a default notification bar in your net web page.

var defaultBar = new $.peekABar();

3. Cross the customization choices to the default bar.

var defaultBar = new $.peekABar({

    // customized html content material
    html: 'Your Message Right here',

    // for autohide possibility
    delay: 3000,

    // auto cover after a timeout
    autohide: false,

    // padding
    padding: '1em',

    // background shade
    backgroundColor: 'rgb(195, 195, 195)',

    animation: {

      // slide or fade
      sort: 'slide',

      // animation pace
      period: 'gradual'


    // extra CSS class
    cssClass: null,

    // CSS opacity
    opacity: '1',

    // prime or backside
    place: 'prime',

    // Shut the bar by clicking on it.
    closeOnClick: false


4. Callback features.

var defaultBar = new $.peekABar({
    // Referred to as after the bar is proven.
    onShow: operate() {},

    // Referred to as after the bar is hidden.
    onHide: operate() {},


5. The strategy to cover the notification bar.



v3.2.1 … v3.2.72 (2022-09-10)

v3.1.0 (2020-12-16)

  • Higher deployment course of

v3.0.2 (2020-08-28)

v3.0.1 (2020-08-03)

v3.0.0 (2019-06-07)

  • Improve from JSHint to ESLint

v2.0.0 (2019-05-25)

  • Improve from JSHint to ESLint
  • Add assist for Babel transpiling
  • Take away CodeClimate and Travis construct recordsdata because it wants extra analysis
  • Replace README with extra information


This superior jQuery plugin is developed by kunalnagar. For extra Superior Usages, please test the demo web page or go to the official web site.



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments