Fork me on GitHub

humane.js

A simple, modern, framework-independent, well-tested, unobtrusive, notification system.
Utilizes CSS transitions when available, falls back to JS animation when not. Includes mobile support.

Select A Theme:

Click a code sample below to see it in action:

humane("Welcome Back");
humane.log("Welcome Back");
humane.info("Record <b>392</b> has been updated");
humane.error("Invalid Username and/or Password");
humane.success(["List","of","Items"]);
humane("Second parameter takes a callback that's fired when finished", function(){
   document.body.style.backgroundColor="#6699FF";
});

Options

humane.timeout = (number of milliseconds);

Sets the delay before a message fades out.

Try It: 2500 (2s - default) 5000 (5s) 500 (0.5s) 0 (no timeout)

humane.waitForMove = (true|false);

Wait for mouse, keyboard, or touch action to be taken before clearing message (after timeout)

Try It: true false (default)

humane.clickToClose = (true|false);

Click or touch the notification to close

Try It: true false (default)

Customizing Options Per Type

All the options are also customizable by type. For example, say you wanted errors to always stay up until the user moved the mouse.

humane.error.waitForMove = true;
humane.error('Stays up a until mouse move');
humane.log('Gets removed after timeout');

Or say you want success messages to remain up forever unless a user clicks them:

humane.success.timeout = 0;
humane.success.clickToClose = true;
humane.success('Will stay up forever until click');

Or you want all messages to have 3s timeout (3000) but 'info' messages to have shorter timeout of 1s (1000)

humane.timeout = 3000;
humane.info.timeout = 1000;
humane.log('I'm up for 3 seconds');
humane.info('I'm up for 1 second');

Events

humane.js provides some events more intended for plumbing purposes, say you wanted to implement stacking or logging:

humane.on('add', function(type, message) { ... });

Fires when a new message is added to the queue

humane.on('show', function(type, message) { ... });

Fires when a message is about to be shown

humane.on('hide', function(type, message) { ... });

Fires when a message is hidden and removed

Browser Support

Uses CSS Transitions where available otherwise falls back to JS animation, degrades gracefully.

Create A Custom Theme

Humane is easily themable using Stylus. There are currently a few themes, but I hope this grows. Send me a pull request and update the wiki with your favorite look and feel.

Download and Usage

Visit github page to download and get more details.