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!
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
1 Feb 23, 2022
3 Feb 23, 2022
2 Jan 18, 2022
52 Dec 31, 2022
4 Dec 16, 2022
3 Apr 12, 2022
6 Sep 24, 2022
7 Dec 20, 2022
7 May 20, 2022
4.3k Dec 22, 2022
2 Nov 25, 2020
14 Dec 11, 2022
1 Jun 30, 2022
0 Oct 29, 2022
6 Oct 27, 2022
5 Nov 14, 2022