Welcome to jQuery.peekABar

The Ultimate Notification Bar Plugin built on top of jQuery



  View on npm

Features

Minimal Code

Highly Customizable

Awesome Support


Install

npm install jquery.peekABar --save


Demos

Default Bar

The simplest way to create a peek-a-bar!


Code


var bar = new $.peekABar();
bar.show();
bar.hide();


Override Default HTML

You can use custom HTML in the bar. Click the Show Bar button to see the new HTML.


Code


var bar = new $.peekABar();
bar.show({
    html: 'Override all, puny humans!'
});


Autohide Bar

Setting autohide: true will automatically hide the bar after 3 seconds (default).


Code


var bar = new $.peekABar({
    autohide: true
});
bar.show();


Change Bar Padding

Set a custom bar padding.


Code


var bar = new $.peekABar({
    padding: '2em'
});
bar.show();


Change Bar Background Color

Set a custom bar background color (green).


Code


var bar = new $.peekABar({
    backgroundColor: 'green'
});
bar.show();


Animation Type

Make the bar reveal itself using a slide/fade animation with a custom render duration.


Code


var bar = new $.peekABar({
    animation: {
        type: 'fade',
        duration: 1000
    }
});
bar.show();


Custom CSS Class

Apply a custom CSS class to the bar. Please note that this will override all styles set in the options.


Code


var bar = new $.peekABar({
    cssClass: 'custom-class'
});
bar.show();


Opacity

Change the opacity of the bar to get a translucent/transparent effect.


Code


var bar = new $.peekABar({
    opacity: 0.7
});
bar.show();


Custom Bar Position

Where would you like the bar to show? Top or bottom?


Code


var bar = new $.peekABar({
    position: 'bottom'
});
bar.show();


Bar on Show/Hide Events

Want something to happen after the bar is shown/hidden? Use the onShow/onHide events.




This is HIDDEN originally and will be SHOWN after you click Show Bar. (Resets after 5 seconds)
This is SHOWN originally and will be HIDDEN after you click Hide Bar. (Resets after 5 seconds)

Code


var bar = new $.peekABar({
    onShow: function() {
        // Do something after bar is shown.
    },
    onHide: function() {
        // Do something after bar is hidden.
    }
});
bar.show();


Contact

For any issues/feedback, please create a Github Issue.