mk-infopane

Kind of a status-bar or notifier. Sliding messages in area with limited height. A library agnostic, mobile friendly, css animated UI widget. Minimal restrictions on styling.

Developed for mobile, but turned out to be useful for desktops.

Demo

Inclusion

Include script and style sheet into you page:

<script src="path/to/plugin/mk-infopane.min.js"></script>
<link href="path/to/plugin/mk-infopane.min.css" rel="stylesheet">

Usage

Create html block you want to use as an infopane.

<div id="paneElement"></div>

Create infopane instance, binded to DOM element.

var pane = new mk.Infopane( paneElement[,options] );

Publish messages with different styles to pane

pane.echo(text[, options])
pane.ok  (text[, options])
pane.warn(text[, options])
pane.err (text[, options])
pane.info(text[, options])

Publish messages with custom styles

pane.print(options);

Control published messages

var message = pane.info (text, options); // create and print message
message.put(newText); // replace text in it
message.append(additionalText); // add text
setTimeout(function(){ message.unpublish(); },10000) // close it later

Pane options

• height {integer}
• collapse {boolean}
• onMessage {function}
• onMessageRemove {function}

Details and Demo