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.
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"; });
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)
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');
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
Uses CSS Transitions where available otherwise falls back to JS animation, degrades gracefully.
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.
Visit github page to download and get more details.