Papermashup

Subscribe


Tweets


"@KBedders @elerichardson I'm Free!!!!!! Call / Whatsapp me!!!"

@ashleyford 2 weeks ago

"@KBedders moomin!"

@ashleyford 2 weeks ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

jQuery growl notification plugin

AshleyAshley

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>

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 20
  • shakir ali
    Posted on

    shakir ali shakir ali

    Reply Author

    some one please help me


  • shakir ali
    Posted on

    shakir ali shakir ali

    Reply Author

    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
    Posted on

    Jayme Brereton Jayme Brereton

    Reply Author

    how would one integrate this with php?


  • Neil
    Posted on

    Neil Neil

    Reply Author

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


  • Carson McMillan
    Posted on

    Carson McMillan Carson McMillan

    Reply Author

    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
    Posted on

    Martijn Martijn

    Reply Author

    Hello Carson,

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


  • Carson McMillan
    Posted on

    Carson McMillan Carson McMillan

    Reply Author

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


  • Carson McMillan
    Posted on

    Carson McMillan Carson McMillan

    Reply Author

    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
    Posted on

    Oscar Oscar

    Reply Author

    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…


  • Mathew
    Posted on

    Mathew Mathew

    Reply Author

    Hi,

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

    Thanks


  • Miles
    Posted on

    Miles Miles

    Reply Author

    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?


  • Santiago Guzman
    Posted on

    Santiago Guzman Santiago Guzman

    Reply Author

    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.


  • Deals
    Posted on

    Deals Deals

    Reply Author

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


  • Tim Benniks
    Posted on

    Tim Benniks Tim Benniks

    Reply Author

    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


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

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


  • Sashi
    Posted on

    Sashi Sashi

    Reply Author

    Very nice plugin…. dynamic !


  • Mihail Dzantiev
    Posted on

    Mihail Dzantiev Mihail Dzantiev

    Reply Author

    thanks it’s very useble…


  • PaweÅ‚ P.
    Posted on

    Paweł P. Paweł P.

    Reply Author

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


  • StarZ3r0
    Posted on

    StarZ3r0 StarZ3r0

    Reply Author

    Cool, thx.