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.

Code

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