mk.Infopane

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

Download from GIT Hub Download as NPM package

Demo

This is infopane.
Use form below to print messages here.

text:
duration:


call type:


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

Prepare

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] ) );

Options

Usage

pane.print(options);

Message options

Syntax sugar

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

Examples

// create infopane instance, binded to DOM element
var pane = new mk.Infopane( document.getElementById('paneElement') );
// call methods, corresponding to message status, to print messages
pane.echo(text, options);
pane.ok  (text);
pane.info(text);
pane.warn(text);
pane.err (text);

Messages control

If you want to control printed message programmatically, remember message instance in a variable. Then you can change or update text in message or close it by some event.

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

Methods