Making a better notification plugin: jQuery

drew — Thu, 23 Jul 2009 03:33:18 +0000

I find myself at a crossroads. I really like using jQuery, and I really like not having to write my own plugins as there are some really good ones out there. But I have run into a problem when it comes to a notification system. Let’s take a step back and discuss the purpose for a minute.

** Update 7/29/2009**
I now have a page dedicated to this at http://www.alldorks.com/wordpress/notify where you can also find the source code repository.

Within a website’s user interface you have common tasks. Of late, with ajax, overlays|dialogs|lightboxes have become common place. Usually developers will use these to replace their `alerts`, `confirms` and leave it at that. But what happens when a user does something and they need to be told “Hey, I got that and it was all ok”. So you simply make an `alert` and let them know. But then you have created this thing that they must read, click and then move on. Add that up, and a user that is moving right along, may have to do 10 clicks a minute extra. Or better yet, daily tasks are now incorporating clicks that are basically pointless. A better solutions is to open up a notification, not unlike what is found in OSX, Gnome and Windows. I’m talking about those little rounded popups that show up in some corner and then disappear. Those… are notifications, and have been missing from most websites that really need them.

So now you know what I wanted. A good looking notification system that is robust, adaptive, lightweightish, easy to work with, etc, etc. Well, I couldn’t find that. I did find mainly two that are out there, jGrowl and Gritter. Both are Okay, but I run into issues with both of them whenever I’m coding. Namely, what if I want multiple notification areas? That shouldn’t be that hard, but it becomes a nightmare to edit and maintain their code. Also, what if I miss the notification (getting coffee), how can I get it back? Finally, why is it so difficult to change how these dang things look! So I put my foot down and decided, “I will go it alone on this one”. I rolled up my sleeves and put my knowledge together to form a better notification plugin. I’m calling it “notify”, and I think it will quickly become a better platform for notifications.

I have a few things that I have been focused on:

Multiple notification spots (middle, top-left, unlimited with css)
Simple default notifications, completely customizable with options
Support for Class A browsers minus IE6, with hacks later to work it into IE6
Notification history manager, along with stickyness, and missed notices handling

The list goes on from there. It’s probably best to just play with the code, for now, it’s very raw, I will probably host a page on http://alldorks.com/ for it soon, along with a version control system to get the code from. In any case, enjoy!

View the Demo Page, code is in the page

geedew » Notify

Making a better notification plugin: jQuery