# 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.

- Internet Explorer 7+
- Firefox 3+
- Chrome 9+
- Safari 3+
- Opera 10+
- iOS 4+
- Android 2+

### 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.