Nattily Primped Monster

    jquery-peek-a-bar

    3.2.75 • Public • Published

    jquery.peekABar

    npm version

    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!

    Install

    npm i jquery-peek-a-bar

    DownloadsWeekly Downloads

    1,659

    Version

    3.2.75

    License

    MIT

    Unpacked Size

    12.3 kB

    Total Files

    8

    Last publish

    Collaborators

    • kunalnagar