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
  • shakir ali

    some one please help me

  • shakir ali

    i have file uploading functionality in my application i am uploading a file in background if user navigate to another tab then i am not able to show a success message that your file uploaded successfully to user,if user not navigate to other tab then i am able show a message..my qsn is how can i show a notification message to user that your file is uploaded successfully.

  • Jayme Brereton

    how would one integrate this with php?

  • Neil

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

  • http://www.mybigcampus.com Carson McMillan

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

  • Martijn

    Hello Carson,

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

  • http://www.mybigcampus.com Carson McMillan

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

  • http://www.mybigcampus.com Carson McMillan

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

  • Oscar

    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…