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
  • Mathew

    Hi,

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

    Thanks

  • Miles

    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?

  • http://blogxperts.com Santiago Guzman

    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.

  • http://www.soudeal.com/deals Deals

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

  • http://www.facebook.com/people/Tim-Benniks/755024399 Tim Benniks

    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

    • http://www.papermashup.com Ashley

      Hey Tim, It’s an awesome plugin! Im currently using it in a project i’ll ping you a link when its done :)

  • Sashi

    Very nice plugin…. dynamic !

  • http://www.facebook.com/people/Mihail-Dzantiev/1696526661 Mihail Dzantiev

    thanks it’s very useble…

  • http://imperion.pl PaweÅ‚ P.

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

  • http://blog.starweb.hu StarZ3r0

    Cool, thx.

  • Pingback: uberVU - social comments