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.log("Welcome Back")
humane.log("Record 392 has been updated")
humane.log(["List","of","Items"])
humane.log("Callback when finished", function(){ document.body.style.backgroundColor="#a66000" })
humane.log("Options can be passed", { timeout: 4000, clickToClose: true, addnCls: 'humane-error' })

Options

Options can be specified in a variety of ways. Either by the entire instance as shown below, or per notification, as shown above:

humane.timeout = 5000 // default: 2500

Sets the delay before a message fades out (set to 0 for no timeout).

humane.waitForMove = true // default: false

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

humane.clickToClose = true // default: false

Click or touch the notification to close

humane.timeoutAfterMove = 2000 // default: 0

Delay before notification disappears (useful in conjunction with waitForMove)

humane.addnCls = 'humane-info' // default: ''

Specify an additional class to apply when notifying (nice when you only want to change just a little bit of the style)

Create instances with humane.create

Create a completely new instance of humane using humane.create().

var notify = humane.create({ timeout: 4000, baseCls: 'humane-bigbox' })
notify.log('Custom Notifier')

There are a options that can also be applied when creating an instance:

humane.baseCls = 'humane' // default: 'humane'

Specify an base class

Spawn notifiers with humane.spawn

Create a custom notifier using humane.spawn().

humane.info = humane.spawn({ addnCls: 'humane-libnotify-info', timeout: 1000 })
humane.info('Info Themed Notifier')
humane.error = humane.spawn({ addnCls: 'humane-libnotify-error', timeout: 1000 })
humane.error('Error Themed Notifier')

Force remove current notification

humane.remove(function(){ alert('removed') })

Force remove current notification, takes an optional callback fired when finished (note each instance has its own remove)

Go crazy

With all this power, you are bound to go CRAZY! Click the sample below to go crazy:

var bigbox = humane.create({baseCls: 'humane-bigbox', timeout: 1000})
bigbox.error = bigbox.spawn({addnCls: 'humane-bigbox-error'})
bigbox.log('Oh!').error('No!')

var libnotify = humane.create({baseCls: 'humane-libnotify', addnCls: 'humane-libnotify-info'})
libnotify.log('Notified')

var jacked = humane.create({baseCls: 'humane-jackedup', addnCls: 'humane-jackedup-success'})
jacked.log("What's up here!")

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.