Recently I have been swamped with work and also giving support for my first jQuery plugin Zoomy. With all the success with Zoomy I have decided to author another plugin. I have been building all kinds of little things here and there so I was thinking what could be useful? So I did a little surfing and found out alot of companies use notifications to alert their uses to some type of event going on with the site or the sites company. So I decided that I wanted to replicate the most common.

This notification was a long bar right at the top of the window. I have a feeling this was a way to sort of make a website look like an IE or Firefox native to the browser notification. So I had a really good feeling that many other people would want something like this as well. First time I really recognized this type of notification was on Google‘s main page. There was a blue notification that had came up that it would prompt asking “Would you like to bookmark Google as your homepage”. Then again I saw Mashable using this same technique telling its readers “Hey Circle us on Google Plus”. Last to mention on Yahoo I noticed the same bar that claimed “We have a New Layout give us your feedback”.

Let them know

First like any jQuery plugin you need to include jQuery, and the file to plugin. Also with this plugin you need to add a small CSS file that will style the Notification bar. This is done purposely so that it is super easy to customize in the CSS so the look and feel is completely up to you or you designer.

<link href="path-to/notify.css" type="text/css" rel="stylesheet" />
<script src="path-to/jQuery.js"></script>
<script src="path-to/notify.js"></script>

Now since you have the files plugged in you can literally use Notify from your console. If your using a Webkit browser hit ’option, command, I’ or on Firefox hit ‘F12‘. Now in your console tab type.

$.notify.success('Woot woot, plugin is working');

If it worked congrats if not check to make sure all three file are included in your webpage. So to close the notification type in the console.

$.notify.close();

This will close that notification. It was built this way so that you can use different functions to close and open the notifications. Like if  you want to show a loading notification while doing a large ajax call. You can open it before the call, then close it on success. You can even show a success or error notification after the call as well. Notify does not always need to be closed manually check below at the Options section for more closing options.

Modes

$.notify.mode('This is not a real mode');

I decided there should be different modes for Notify so that you can handle multiple styles without having to write much more code. There are four different modes. Success, Error, Alert, and Basic, these all have distinct coloring. to call the differnt mode is super easy.

$.notify.success('Success');

$.notify.error('Error');

$.notify.alert('Alert');

$.notify.basic('Basic');

You can probably see why it would be nice to have these distinct different looks, and I think the coolest part of this is if you dont like the colors all you have to do is change the CSS for the specific mode. The classes are very easy to spot eg. .notify-basic .

Options

$.notify.basic('String to be read', {options});

Of course what is a plugin without options. So when this is published there is a total of three option. Two are specifically for closing and the other is a space based option.

Closing with Style

Auto Close

So there are some notifications that only need to be seen for a period of time. For example if you use this to notifie your uses that their mail was sent from an online form successfully. Use auto close to close the notification after a small period of time. To use auto close its simple.

$.notify.success('This will close in time', {autoClose: 3000});

As you can see the the parameter takes a number. This goes by milliseconds and the example above displays for 3 seconds.

User Close

Lets say you really want the user to see this notification but you would like them to be able to close the notification if they would like. Well this option will do that very thing. All it adds is a small X by the right corner. Once clicked it will close the notification.

$.notify.error('You need to close me!', {close: true});

This takes a boolean ‘true’ or ‘false’. There is no need for false because it will set to false automatically. So it only needs to be declared when it need to be true.

Occupy Space

This will allow the notification to make space for itself based on the height of the notification. Lets assume you want to call notify at the beginning of the page load. You should not also cover up the top content which you will if you dont set this option to true.

$.notify.alert('Im going to move everything down' {occupySpace: true});

This just like ‘close’ will only work with a boolean true.

Further Reading

To Download go to the homepage

Notify is open source

Notify’s animations use CSS3 transitions. If your browser supports them it will use them. If it does not, it will fallback to a javascript animation.

Also Notify works pretty well on new mobile Webkit browsers, but does not act very good on IOS4 and lower. Other mobile browsers not tested. If you have some insight let me know in the comments.