/ best free open source web resources /

Graphic Resources

jGrowl – Unobtrusive Notification System for jQuery

Posted · Category: MIT License, Popup

We have mentioned Growl-like notification system for web a while ago, they are Send Notifications Instantly with Growl Mootools and Roar – Another Notification Widget with MooTools. Here is another Growl-like script for web which is written in jQuery called jGrowl.

jGrowl is a jQuery plugin that raises unobtrusive messages within the browser, similar to the way that OS X’s Growl Framework works. It has the ability to create multiple container instances, allowing a developer to raise and create various notifications in various location on the user’s screen.


Requirements: jQuery Framework
Demo: http://stanlemon.net/projects/jgrowl.html
License: MIT License

  • Edwin

    Although I more like using jQuery, I think Mootools Window Growl looks nicer. But with a little tweaking you can look this one like that I think…

  • Kevin

    Cool, I like that. Thanks for the link.

  • Pingback: links for 2008-07-07 « Brent Sordyl’s Blog()

  • Macca

    Instead of these being activated by clicking a link can they be activated by inserting the cursor in form field? I’d like to work out how to use these to provide contextual help items.

  • Stan

    Edwin: You should be able to customize this to look like just about anything via CSS. A little later I will look into mocking up a demo with some more creative styling.

    Macca: Yes, as long as the proper DOM is built you can raise a notification at any point. Here at work we often use it in response to AJAX requests.

    Ray: Thanks for posting about my plugin!

  • Stan

    Take a look at:

    This defines a theme using the same smoke.png that the MooTools Growl library uses and it additionally defines a theme to parallel jQuery UI’s Flora theme.

    Little bit of CSS and you can really dress this up any way you want.

    – Stan

  • Edwin

    @Stan: Thank you! :)

  • Edwin

    I didn’t saw examples with jgrowl and images yet, like within the MooTools Grow, do you think it’s possible too? (didn’t had time to test it yet)

  • Stan

    Edwin: Yes, that link I posted uses the same “Smoke.png” image as the mootools plugin for the bottom right quadrant. Very possible, anything is possible with CSS. :)

  • Pingback: links for 2008-07-12 | JeremiahTolbert.com()

  • Adam

    How would one go about using jGrowl to provide a notification when a remote user makes an ajax form submission? Nothing fancy, just a “Someone has posted a new message” type of thing. Does jGrowl (or anything else) have the capability to remotely listen for this stuff?

  • Stan

    There are a number of ways you can accomplish this. One project I use has a generic notification pool located at a RESTful url, so after every AJAX request another AJAX request is fired off to that pool to get any “notifications” that have been raised. These then are raised in jGrowl by that request. That is though, perhaps a more complex model. Another option is simply to set the ‘success’ property of $.ajax() options object to raise the notification for you. This assumes ajax request X will have response Y or Z, Y if it fails and Z if it is successful. Broader implementations will need to be more aware of the structure for notifications, ie. if the AJAX request always returns a JSON node with a message property, then you could write a global AJAX complete method that send that message property to jGrowl.

    Hope that helps.


  • Pingback: 37 Phenomenal jQuery Plugins and Demos for Developers : Speckyboy - Web Design, Web Development and Graphic Design Resources()

  • Pingback: Tims Blog » Blog Archive » Prepare for snow()

  • Hi guyz,
    I’d like to ask idea on how to use this plugins as a notification message to let know all the online users that there is a new login users. Just like Yahoo messenger. It display a notification message if there is somebody new login users

  • Pingback: 37 Fenomenales jQuery Plugins y Demos para Desarrolladores | Proyecto Aurora()

  • Excellent plugin!

  • Bob

    I’d like the size of the jGrowl notification to be flexible based on screen size. I have the alerts appears on the right hand side of the screen (with the default size of 235px). The rest of my screen is actually set to take of 84% of the screen. How do I convert jGrowl to use this remaining 16%? When I tried changing this in the css file, I got very small notification boxes.

Supported By


Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons