JQueryPNotify

Homepage: http://pines.sourceforge.net/pnotify/
Author(s): Hunter Perrin
Version: 1.0.1

Full featured plugin to show temporary floating messages for status updates, actions and errors.

Usage

Call $.pnotify(options) to show a notification.

Most common options:

• pnotify_title: the title
• pnotify_text: the message text
• pnotify_delay: milliseconds to show the message
• pnotify_opacity: value from 0 (fully transparent) to 1 (opaque)
• pnotify_nonblock: true if items below the message should be clickable
• pnotify_type: 'error' if an error message

Option	Comment	Default value
pnotify_addclass	Additional classes to be added to the notice (for custom styling)	""
pnotify_hide	After a delay, remove the notice	true
pnotify_insert_brs	Change newlines to br tags	true
pnotify_nonblock	Create a non-blocking notice; it lets the user click elements underneath it	false
pnotify_delay	Delay in milliseconds before the notice is removed	8000
pnotify_shadow	Display a drop shadow	false
pnotify_history	Display a pull down menu to redisplay previous notices, and place the notice in the history	true
pnotify_min_height	Minimum height of the notice; it will expand to fit content	"16px"
pnotify_opacity	Opacity of the notice	1
pnotify_closer	Provide a button for the user to manually close the notice	true
pnotify_remove	Remove the notice's elements from the DOM after it is removed	true
pnotify_mouse_reset	Reset the hide timer if the mouse moves over the notice	true
pnotify_animate_speed	Speed at which the notice animates in and out; "slow", "def" or "normal", "fast" or number of milliseconds	"slow"
pnotify_animation	The animation to use when displaying and hiding the notice. "none", "show", "fade", and "slide" are built in to jQuery. Others require jQuery UI. Use an object with effect_in and effect_out to use different effects.	"fade"
pnotify_error_icon	The icon class to use if type is error	"ui-icon ui-icon-alert"
pnotify_notice_icon	The icon class to use if type is notice	"ui-icon ui-icon-info"
pnotify_text	The notice's text	false
pnotify_title	The notice's title	false
pnotify_nonblock_opacity	The opacity of the notice (if it's non-blocking) when the mouse is over it	0.2
pnotify_stack	The stack on which the notices will be placed. Also controls the direction the notices stack.	{"dir1": "down", "dir2": "left", "push": "bottom"}
pnotify_type	Type of the notice: "notice" or "error"	"notice"
pnotify_width	Width of the notice	"300px"

See for examples the plugin example page.

The plugin uses the jQuery UI CSS library for styling, which means it is fully and easily themeable.

Examples

A simple notice

click me

A customized one

Show message