Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

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.

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 README.textile
Octocat-spinner-32 demo.html
Octocat-spinner-32 jquery.notifications-1.1.js
Octocat-spinner-32 jquery.notifications-1.1.min.js
Octocat-spinner-32 jquery.notifications.css
README.textile

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.

Something went wrong with that request. Please try again.