Use your left/right keys to browse tutorials
jQuery growl notification plugin

jQuery growl notification plugin

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on March 21, 2010

Last week I signed up Gravity a new site setup by a few guys that used to work at MySpace. As i was using the site I noticed these great little notifications popping up in my browser, Mac users will be familiar with this as they work in the same way as Growl notifications.
I thought it was interesting that this technique of displaying live information to users could be presented in this way, so i went on the hunt for a similar jQuery plugin and found a number of results however the one that caught my eye was the jQuery Notice plugin by Tim Benniks.

The JavaScript

Below is the JavaScript that is used in the demo this plugin simply extends the jQuery framework, allowing you to activate a message box by calling the function ‘noticeAdd()’.

One interesting feature of this plugin is that it allows you to append a CSS class to the popup notice which can then be styled.

For example with the error message I’m appending the .error class and in the CSS i’m just adding a background color.


	$(document).ready(function()
	{
			jQuery.noticeAdd({
				text: 'This is a simple notification using the jQuery notice plugin. Click the X above to remove this notice.',
				stay: true
			});

		$('.add').click(function()
		{
			jQuery.noticeAdd({
				text: 'This is a notification that you have to remove',
				stay: true
			});
		});

		$('.add2').click(function()
		{
			jQuery.noticeAdd({
				text: 'This is a notification that will remove itself',
				stay: false
			});
		});

			$('.add3').click(function()
		{
			jQuery.noticeAdd({
				text: 'This is an error notification!',
				stay: false,
				type: 'error'
			});
		});

					$('.add4').click(function()
		{
			jQuery.noticeAdd({
				text: 'This is a success notification!',
				stay: false,
				type: 'success'
			});
		});

		$('.remove').click(function()
		{
			jQuery.noticeRemove($('.notice-item-wrapper'), 400);
		});
	});

The HTML

<ul>
  <li class="add">Click here to see a notification that you have to remove</li>
  <li class="add2">Click here to see a notification that does not stay</li>
  <li class="add3">Error Notification</li>
  <li class="add4">Success Notification</li>
  <li class="remove">Remove all active notifications</li>
</ul>



More tutorials from Papermashup
Comments
18 discussions around jQuery growl notification plugin
Newer Comments
  1. Mathew says:

    Hi,

    Thanks for this. Is there a way to make them popup automatically after page load ?

    Thanks

  2. Miles says:

    Hi I was curious is there anyway to position these at the top of the page?

    I have a navigation bar fixed always on the bottom of the browser and the notifications cover it up.

    Is this an easy fix?

  3. This notifications will be great on wordpress.

    Exaple:

    Show a notification bubble to unregistered users.

    And not to show that bubble when your logged in.

    I dont know if you ccan do that.

  4. Deals says:

    Very nice plugin, I will try it on my site~

  5. Tim Benniks says:

    Hey Ashley,
    Thanks for featuring my jQuery plugin! I put this post on my blog too.
    http://www.timbenniks.nl/blog/964/jquery-notice-featured-on-papermashup-com

    Cheers,
    Tim

  6. Sashi says:

    Very nice plugin…. dynamic !

  7. thanks it’s very useble…

  8. Paweł P. says:

    Nice plugin! I’ll use this solution in next project.
    Best regards! Take care!

  9. Pingback: uberVU - social comments

Newer Comments




Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.
Subscribe
OR

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.
Subscribe

Get in contact

Please use the form below to get in contact. If your question is related to a free script download, please use the comments on the article page as community members are more likely to respond quicker than I can personally.

About Me

I'm Ashley Ford, Co-founder and Technical Director at Harkable.com London, UK. Previously I worked at InMobi, Spotify and MySpace. My interests include photography and making short videos I'm also an avid F1 fan. I'm always working on side projects. Here are a few: Easy Poll, We Deliver.



What do you specialise in?

I spend a lot of time coding in PHP and MySQL, as well as front end XHTML and CSS. I also specialise in javascript and the jQuery framework as well as being an avid designer. You can find me on dribbble

Interested in advertising?

If you'd like to advertise on Papermashup.com please get in touch via the contact link below for advertising opportunities.

How do I contact you

You can contact me here. and I'm available for consultation, freelance, programming book reviews.

Get on the mailing list

Join over 3000 people who have subscribed to the Papermashup inbox message, and be the first to find out about tutorial, competitions and giveaways.