node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »



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.



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">


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])[, options])

Publish messages with custom styles


Control published messages

var message = (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