@kunalnagarco/jquery-peek-a-bar

A jQuery plugin for a notification bar with customization options.

Installation

npm install @kunalnagarco/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.

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.

bar.destroy()

Remove the bar from the DOM and cancel any pending autohide timer.

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.'
});

Development

This project uses Yarn 4, pinned via the packageManager field and managed by Corepack (bundled with Node.js ≥ 16.9). Enable Corepack once, then install and build:

corepack enable        # activates the pinned Yarn version automatically
yarn install --immutable
yarn build

The Node version is pinned in .nvmrc.

Releasing

Releases are automated by semantic-release on every push to master (see .github/workflows/cd.yml). Version bumps, changelog entries, the GitHub release, and the npm publish all happen in CI — never publish from a local machine.

npm publishing uses OIDC trusted publishing rather than a long-lived NPM_TOKEN, so no npm secret is stored in the repo and every release is published with provenance automatically. This requires a one-time setup on npmjs.com: under the package's Settings → Trusted Publisher, add a GitHub Actions publisher for the kunalnagarco/jquery.peekABar repository and the cd.yml workflow.

Browser Support

All modern browsers are supported. IE11 and below are not supported as of v5.0.0.

Support

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

Share

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