iGrowl, A simple jQuery Plugin for iPhone Notifications v0.1

So you may or may not have noticed the iPhone notifications which popup every now and then subtly dropping you information. They come in real handy for AJAX calls on the iPhone.

I’ve been recently developing a Web App for the iPhone and came across the problem of displaying these. I couldn’t find a suitable notification plugin (that was simple) for jQuery so decided to whip one up myself (yay my first jQuery Plugin).

This mimics the iPhones native Growl notifications. I first saw these in Tweetie (now Twitter for iPhone) when hitting the retweet button.

It has three options, to use simply include the jQuery Library and then any of these three things:

1. AJAX Spinner

$.iGrowl(1,"Please wait..."); //1 = ajax spinner

2. Success!

$.iGrowl(2,"Success!"); //2 = the tick icon

3. Error

$.iGrowl(3,"Error"); //3 = the cross icon

The idea is a simple notification system for iPhone and works perfectly for AJAX callbacks. You can customise the message to display anything you like and it works on all the modern browsers. It was intended for use only on Apples mobile devices but works and looks great in Firefox, Safari and Chrome and doesn’t look too bad in IE either.

Any problems let me know and I’ll be right on to fix them. Enjoy!

Download iGrowl v0.1 – 7.6kb | View a Demo

Tip: View the demo in your iPhone and add it to your homescreen for a true Web App demo.