Categories
Plugins

jquery-peek-a-bar

jquery.peekABar

A jQuery plugin for a notification bar with customization options.

Important Note
We have stopped supporting bower as a package manager since v3.0.0.

Installation
npm install jquery-peek-a-bar –save

Options

html
Use custom HTML as bar text.
Type: String
Default: Your Message Here

autohide
Autohide the bar after it is shown.
Type: Boolean
Default: false

delay
Time (in ms) before the bar is hidden if autohide is true.
Type: Number
Default: 3000

padding
Add some padding to the bar.
Type: String
Default: 1em

backgroundColor
Add a custom background color to the bar.
Type: String
Default: rgb(195, 195, 195)

animation
The way in which the bar reveals itself.
Type: Object
Example:
animation: {
type: ‘slide/fade’,
duration: ‘slow/3000(in ms)’
}

cssClass
Assign a Custom CSS class to the bar. Overrides ALL styles passed as options. For e.g. padding, backgroundColor etc.
Type: String
Default: empty

opacity
Change bar opacity.
Type: Number
Default: 1

position
Where should the bar be revealed? Top or bottom of the page?
Type: String
Default: top
Values: top | bottom

closeOnClick
Close the bar by clicking on it.
Type: Boolean
Default: false

Event Methods

onShow
Called after the bar is shown.

onHide
Called after the bar is hidden.

Instance Methods

bar.show()
Show the bar.

bar.hide()
Hide the bar.

Example
Please check out the complete example below:
// Create a bar
var bar = $.peekABar({
html: ‘Custom Message’,
delay: 2000,
autohide: true,
padding: ‘2em’,
backgroundColor: ‘rgb(195, 195, 195)’,
animation: {
type: ‘fade’,
duration: ‘2000’
},
opacity: ‘0.8’,
cssClass: ‘custom-class’,
position: ‘bottom’,
closeOnClick: true
onShow: function() {
console.log(‘called after bar is shown’);
},
onHide: function() {
console.log(‘called after bar is hidden’);
}
});

// Show the bar
bar.show();

// Hide the bar
bar.hide();

// Show the bar with custom HTML
// This call will override the HTML
// set in any previous definitions.
bar.show({
html: ‘Overrides all, puny human.’
});

Support
For any issues/queries, please open a new Github Issue.

Share
If you like the plugin, please share it with your friends!

GitHub Repo