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
Older Comments
  1. Jayme Brereton says:

    how would one integrate this with php?

  2. Neil says:

    Is there way to have a link in an email which when clicked, shows the growl on the website?

  3. You would just call the javascript function explicitly on page load, instead of doing it in a html handler.

    jQuery.noticeAdd({
    text: ‘This is a notification that you have to remove’,
    stay: true
    });

  4. Martijn says:

    Hello Carson,

    How can I use the notify when i load a new page?

  5. Oscar, are you wanting to ‘push’ notifications to your users?, or notify them when they load a new page?

  6. Miles, changing the css to the following will give you the notification in the top right.

    .notice-wrap {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 250px;
    z-index: 9999;
    }

    Mathew:

    The following in your html will produce a notification on page load:

    $(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
    });
    });

  7. Oscar says:

    Buenas tardes soy desarrollador web y mi pregunta es como hacer para mostrar estas notificaciones a los usuarios conectados a mi web. por ejemplo si yo como administrador publico algo y quiero mostrar un mensaje notificando a los usuarios lo sucedido…

Older 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.