jQuery Notifications

This one will show various notifications types one over another at the top covering the entire width of the page. Tested on IE, Firefox and Chrome.

Please go to my personal site for a demo of this.

You can opt to download the minified plugin or the non minified version. And don’t forget the compressed CSS.

Screenshot

Updates:

January 24, 2010 – midday

Merge fork changes from my colleague, Eumir Gaspar – hiding the default #errorExplanation div from Rails and uses my notifications instead to show the errors.
This changes does nothing if you don’t have the div#errorExplanation anywhere on the html page.

January 24, 2010

My extraordinaire colleague Eumir Gaspar wanted to fork my plugin, unfortunately I was selfish so it was nowhere at any SCM.
So today I push it to Github so anyone who would want to continue enhance or modify it can now fork it and we can all merge it later on.

August 17, 2009

Due to one user requests (Tomasz Król), I added an option to change the notification effect to either fade, or slide.

Fixed fadeSpeed option settings

To use:

Just load both the js and css file into your page:

<script type="text/javascript" src="jquery.notifications-1.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.notifications.css" />

And start using it immediately:

$.n("Hey you!");

By default it creates a notice notification. The other types of notification messages are success, warning and error which all are completly customizable through CSS.

Complete usage instruction

$.n("", options) - to show a notifice notification
$.n.success("", options) - to show a success notification
$.n.warning("", options) - to show a warning notification
$.n.error("", options) - to show an error notifcation

The following are the possible options:

timeout – the number of milleseconds before the notification fades away. Default is 10000 ms.
stick – whether to stick the notification or not. Default is true for the error notification, false for the rest
fadeSpeed – the fade animation speed in milliseconds. Default is 800 ms
close – the text or image that would show up for sticky notifications. Default is “x”.
effect – the notification show/hide effect, the default is fade. You can either use “slide” or “fade”.

If you want to set these options only once, override it after the plugin has loaded like so:

$.n.defaults.timeout = 5000;

$.n.defaults.close = “close”;

And each call to any of the notification will use these properties unless override through the option parameters.

Known Issues:

Change the property “position:absolute” to “float:right” on the selector “#jquery-notifications div > a” to fix the issue with the close icon/text that seems to pop out when the sliding effect is used. Though things would look pretty ugly on IE.

If anyone is able to provide a stable fix this let me know and I’ll make a new release together with your fix.