bloggygoodness

I’ve been hunting for a good jQuery Growl look-a-like plugin for some time, but I just can’t seem to find one that looks the exact same as the one for Mac OS, so like most web dabblers would do, I decided to roll my own.

For those who don’t know what Growl is, it’s basically a notification bubble/popup that appears in the top right of your desktop – examples can be found here. Think of it as calling the alert() function in JavaScript, only it’s not a modal, it’s subtle and it doesn’t look like dog shit.

Note: If you’re wanting to know how to integrate Gritter with CakePHP as a flash message, read this article. It’s in Spanish, I know, but if you’re slightly familiar with CakePHP, the code is what really matters.

$.gritter.add({// (string | mandatory) the heading of the notification
title:'This is a notice!',// (string | mandatory) the text inside the notification
text:'This will fade out after a certain amount of time.'});

Adding a more complex notification

$.gritter.add({// (string | mandatory) the heading of the notification
title:'This is a regular notice!',// (string | mandatory) the text inside the notification
text:'This will fade out after a certain amount of time.',// (string | optional) the image to display on the left
image:'http://a0.twimg.com/profile_images/59268975/jquery_avatar_bigger.png',// (bool | optional) if you want it to fade out on its own or just sit there
sticky:false,// (int | optional) the time you want it to be alive for before fading out (milliseconds)
time:8000,// (string | optional) the class name you want to apply directly to the notification for custom styling
class_name:'my-class',// (function | optional) function called before it opens
before_open:function(){alert('I am a sticky called before it opens');},// (function | optional) function called after it opens
after_open:function(e){alert("I am a sticky called after it opens: \nI am passed the jQuery object for the created Gritter element...\n"+ e);},// (function | optional) function called before it closes
before_close:function(e, manual_close){// the manual_close param determined if they closed it by clicking the "x"alert("I am a sticky called before it closes: I am passed the jQuery object for the Gritter element... \n"+ e);},// (function | optional) function called after it closes
after_close:function(){alert('I am a sticky called after it closes');}});

If you wanted to use the “sticky: true” option but still be able to delete it later, you can create a variable that will hold a unique identifier.

var unique_id = $.gritter.add({// (string | mandatory) the heading of the notification
title:'This is a sticky notice!',// (string | mandatory) the text inside the notification
text:'This will not go away until the user has hit the (x) button because sticky has been set to true.',// (string | optional) the image to display on the left
image:'http://a0.twimg.com/profile_images/59268975/jquery_avatar_bigger.png',// (bool | optional) if you want it to fade out on its own or just sit there
sticky:true});

$.gritter.removeAll({
before_close:function(e){alert("I am called before all notifications are closed. I am passed the jQuery object containing all of Gritter notifications.\n"+ e);},
after_close:function(){alert('I am called after everything has been closed.');}});

If you want you can setup global defaults (optional)

Setting up global defaults is handy if you don’t want to specify a ‘time’ attribute for each $.gritter.add call.

$.extend($.gritter.options,{
position:'bottom-left',// defaults to 'top-right' but can be 'bottom-left', 'bottom-right', 'top-left', 'top-right' (added in 1.7.1)
fade_in_speed:'medium',// how fast notifications fade in (string or int)
fade_out_speed:2000,// how fast the notices fade out
time:6000// hang on the screen for...});

one hundred and onecomments

[...] be any easier to do. Just a few lines of JavaScript code and you are good to go. Go check it out at http://boedesign.com/2009/07/11/growl-for-jquery-gritter/. If you are looking for a very easy to implement popup notification system, this really could be [...]

Your demo page shows a bug in Opera 9.64 (WinXP): hitting the "Remove all notifications" link will hide the notifications except any parts of them that are positioned lower than the bottom of the main content area (#container).

Sexy! I was looking for something like this... Then realized nothing is there so was about to write my own and then I stumbled here...

thanks :)

Jordan BoeschJul 12 2009 - 9:36 am

Just updated it to v1.1. Fixed the Opera bug in $.gritter.removeAll(), fixed a small IE6 issue and made it use CSS background-position for images so there isn't a flicker when you hover over the notification.

@tXptr: I just tried it on FF 3.5 - Win XP. Worked fine for me. *shrug* Anyone else experiencing this?

Jordan BoeschJul 12 2009 - 11:15 am

@tXptr: Sorry, I think I misunderstood you. The fadeout timer stops when you hover the notification but then turns back on once you roll off the notification. I think it makes sense for it to turn the fadeout timer back on after you roll off, if you really wanted to read a notification you could just leave your mouse over the notification. This is the same functionality from Growl for the Mac.

@Jordan Boesch: I agree with your last message. If I roll off the notification, the timer should start again or resume - whatever. BUT this feature doesn't work on my computer... if I open your index.html file and click "Add regular notification" the notification appears at the top right area. If I roll over it and let the mouse pointer over it, it disappears after 8 seconds.

Am I doing something wrong?

Jordan BoeschJul 12 2009 - 2:28 pm

@tXptr: I have no idea :| Are you experiencing it in any other browsers? I'll keep checking to see if I can find anything but so far I can't reproduce it.

Hi Jordan. You misread my comment. It acknowledges the mouse is inside by displaying the close (x), but it FAILS to PREVENT AUTOMATIC DISAPPEARANCE (i.e., it allows automatic disappearance!). Even with the mouse inside, it fades away.

Good work! Although there is something similar for a long time now - http://www.stanlemon.net/projects/jgrowl.html

Its always good to have choices :-)

ThomJul 13 2009 - 4:02 am

@Beel : If the mouse is inside the box *before* the fade starts it will not stop the fade out from happening.
However, if you roll over the box once the fade has *started*, it will then cancel the fade out and restore the box.

AnimalJul 13 2009 - 4:19 am

@Jordan --> Thanks for your job !! People like you make this world a better place.

1 question: Is it possible to start gritter once the page is loaded.. like a "commercial", you come to the site, and once is loaded you see one gritter fading out after X seconds..?

[...] GIANT ROBOTS SMASHING INTO OTHE… The Last Psychiatrist: Four Things Not To Do To Your Kids boedesign ottawa based web dabbler Blog Archive Gritter f… We Choose the Moon: Pre-launch JSON: What It Is, How It Works, and How to Use It Blog [...]

Jordan BoeschJul 13 2009 - 7:07 am

@Srinath: True, a few do exist. The reason I did this one is because I wanted something exactly like the one for Mac :)
@Thom: Ohhh! Yes, you're right.
@Beel: I will put in a fix for what Thom described.
@Animal: You can do something like $(document).ready(function(){ $.gritter.add({title: 'hi!', text: 'this is text'}); });

GeorgeJul 13 2009 - 8:06 am

Great great stuff. Thanks a million. I like the perfectness of this Growl type. Good code, good visuals.

Is there a way to close the sticky notification, maybe from the notification itself or from a link elsewhere in the page?

Thanks again for this great plugin.

Jordan BoeschJul 13 2009 - 8:20 am

@George: Well to close a sticky notification from inside the notification itself, you would hover over and click the (X), but to close it from somewhere else on the page, you would need to create a variable that holds the unique identifier for that notification, then call $.gritter.remove(unique_id). The example above shows the use of unique_id.

Jordan BoeschJul 13 2009 - 8:59 am

@Beel & @ tXptr: The fadeout bug is fixed. I've changed the version to 1.2. Now when you hover over it when it appears, it will stay. Sorry about this!

[...] can set the speed of the fade effect used while the notifications appear/disappear. WebSite:http://boedesign.com/2009/07/11/growl-for-jquery-gritter Demo: http://boedesign.com/demos/gritter Share and [...]

[...] boedesign – ottawa based web dabbler » Blog Archive » Gritter for jQuery (Growl) I’ve been hunting for a good jQuery Growl look-a-like plugin for some time, but I just can’t seem to find one that looks the exact same as the one for Mac OS, so like most web dabblers would do, I decided to roll my own. [...]

Would there be a way to impliment setInterval() with this? So for example, every 5 seconds pop another notification up? The reason I ask is for a messaging service which pops up a notification each time a new message is receieved. I want it to keep calling a specific function which will contain this gritter code.

I've tried several techniques using setInterval and jQuery's alternative but no luck.

Am I the only one who can't seem to get large growls to display correctly. Looks like after about 400px the background disappears. The text is still there (just transparent) and the button image for round corners shows up at the bottom..

stoffelNov 20 2009 - 5:15 am

When you hover over the message, the close button sometimes flashes visible/invisible. Is it possible to show the close button consistenly?

stoffelNov 20 2009 - 5:21 am

Sorry, only occurs in IE7

---

When you hover over the message, the close button sometimes flashes visible/invisible. Is it possible to show the close button consistenly?

AndersonNov 20 2009 - 7:23 am

First, thanks for this very nice plugin!

@stoffel:
Same problem here (ie7 trash)... When mouse hover in red areas (see image: http://img694.imageshack.us/img694/6698/jquerygritterhoverprobl.jpg) border and close button disapears, when mouse out the red areas border and close button became visible again. Thanks.

stoffelNov 20 2009 - 8:07 am

Found a solution to the flashing close button problem in ie7/8:

Reason first: if background of the div-container is transparent IE fires mouseleave Events on the regions that are no occupied by nontransparent inner elements.

Solution: Tell IE we have a background-image (that doesn't exist). Add this to the CSS

.gritter-item-wrapper {
[...]
background-image:url('.');
[...]
}

Thats it!

AndersonNov 20 2009 - 11:26 am

@stoffel: Great. Thats works like a charm. :D

Thanks.

stoffelNov 24 2009 - 4:56 am

Another little fix:

$(e).stop().css({ opacity: '' });

instead of:

$(e).stop().css({ opacity: 1 });

fixes another strange IE7+ behaviour and doesn't mess with other browser compatibility, I hope

fNov 26 2009 - 8:15 am

You are the man! thanks for sharing!

JeromyNov 27 2009 - 2:16 pm

I'm getting a "$.gritter is undefined" when loading the page - what would cause that?

LatavishNov 27 2009 - 11:05 pm

Hi Excellent plugin.

Was wondering if I may possible ask as question. I have searched the blog and couldn't locate the answer so forgive me if this is a repeat. Is there a possible way to position the gritter in the center of the screen?

LatavishNov 27 2009 - 11:18 pm

Guess i wasn't looking hard enough. Soon after my question I found a solution. Just in case any

LatavishNov 27 2009 - 11:20 pm

Guess i wasn't looking hard enough. Soon after my question I found a solution. Just in case anyone else should ever ask this question. Just modify the top and right parameters.

@Rob Kesik: For larger growls notifications you'll have to change some CSS to use the larger png. Open up css/gritter.css and replace any instance of "../images/gritter.png" to "../images/gritter-long.png".

@stoffel & friends: I will also look into this IE7 issue and post an update when the fix has been applied.

Jordan BoeschDec 1 2009 - 3:01 pm

Just to let you guys know, I've upgraded Gritter to version 1.6. I've included stoffel's IE7 fix and a few other things: http://github.com/jboesch/Gritter

stoffelDec 3 2009 - 8:20 am

Fading out with V1.6 and IE8 looks a bit funny now: When I click the Close (x) Button the gritter-windows fades out but the Close-Button doesn't! It stays opaque till the fading is complete and the suddenly hides.

Don't believe this is a wanted behaviour ;-)

stoffelDec 3 2009 - 8:42 am

Well, sorry, the Close button doesn't fade in V1.5, too. It's only to so obvious because it is faster in 1.5, I think.

Change $('#add-without-image') to say $('.item_add'). Classes are for collections, ID's are unique identifiers that are only meant for 1 element. That should work :)
Any other issues, feel free to email me on my contact page.

psssst to Arun: he answered that above. Put it inside a document ready call on the page: $(document).ready(function(){ $.gritter.add({title: 'hi!', text: 'this is text'}); });

StreetJan 8 2010 - 6:25 pm

Hiya im working on a project and came across this. Seems like it might be what im looking for. Working on a few tests.
One thing im a bit confused about.
Page loading.
Well you have answered that above and it works like you said it would.
Lets say a user leaves that page and then goes back to it.
In my test the message will only display once, the first time they go to that page.
That might be due to cookie or ajax, as the page is using ajax.
How would i make it so that every time the page is refreshed or gone back to that the message will display every time?

Jordan BoeschJan 9 2010 - 1:11 am

@Street: Could you provide a live example? If you're rendering pages with ajax, you'll just have to recall $.gritter.add when you do-so.

sihemJan 9 2010 - 2:37 am

hi ,it is very good post
can you help me please
i try to show prompt with two state
i try to add to the second state overflow because the text inside is too long and I need it.
this is code
var statesdemo = {
state0: {html:’bbbbbbbbbbbbbbb’,
buttons: { Cancel: false, Next: true },
focus: 1,
submit:function(v,m,f){ calcule1();
if(!v) return true;
else
$.prompt.goToState(’state1′);
return false;
}
},
state1: {
html:”,
buttons: { Back: -1, Exit: 0 },
focus: 1,
submit:function(v,m,f){
if(v==0) $.prompt.close()
else if(v=-1)
$.prompt.goToState(’state0′);
return false;
}
}
};
$.prompt(statesdemo);
the result of calulate(); is too long and is affected to id=ss(second state)
Thank you………….