jQuery: dNotify - A simple user notification plugin for jQuery

Tweet

Today we are going to talk about dNotify, a simple user notification plugin for jQuery.
The way this simple plugin works is very interesting. Because I usually hate when popup message start to - well - pop up all over the web site, I've found dNotify quite unobtrusive. Moreover, we should consider the use of dNotify in web applications, where we do need to interact with the user more than in other situations.
What makes the plugin almost unique is the fact we can control everything about the notification.
Let's see how we can use it.

Download and include
Well... as usual, we need to dowload the .js and css files from the github repository (follow the link above). After that we need to include jQuery and the plugin, together with the stylesheet:

<link rel="stylesheet" type="text/css" href="/css/dNotify.css" media="screen" />
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.dNotify.min.js"></script>

Check the path for your files and change them according to your site structure.

Usage

The basic usage is quite simple:

$(document).ready(function() {
    $.dNotify('good', "Welcome to The Web Thought test page! :)", {duration: 3000});
});

however, we should use a different way of showing the notification message. I know it looks more complicated, but if we need to benefit from the plugin parameters, the following code should be used:

 $.dNotify("show", {
    message: "Test",
    sticky: false,
    duration: 2000,
    type: "good"
});

Now, what's all that? Let's move on and see the available parameters.

The parameters

The list of the possible parameters is:

sticky	boolean - if false the message will be shown just for a specified period of time, if true the message is permanent, and the user needs to click on the message to close it
duration	milliseconds - for non sticky message, it sets the message duration
slideTime	milliseconds - it sets the animation duration (show/hide of message)
message	"text" - the message to be shown
type	"good", "bad" or "warn" - type of message
showIcon	boolean - if true, the message has an icon
iconPosition	"left" or "right" - it sets the icon position
iconFile	the file to be used as icon

The CSS and other methods

As we have seen above, we have to include a .css file together with the plugin file.
The css file can obviously be manipulated to change, for example the type of message (good, bad or warn).
At the same time dNotify has some other interesting methods like:

$.dNotify(“close”, "type”);

that closes all message of the specified type. While

$.dNotify(“closeAll”);

closes all messages.

Conclusion

There's not much more to say about dNotify. I've found it quite useful and highly flexible, as I said, specifically in web applications.
See for yourself and let me know what you think - as usual.