07 Jul

jGrowl – Unobtrusive Notification System for jQuery

MIT License, Popup

Leave a Comment

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

Sponsors

Comments

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

Edwin:
Take a look at:
http://stanlemon.net/jgrowl-1.1.0/jgrowl.html

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.

Pax,
- 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

Adam,
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.

Pax,
SL
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
http://none pans

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
http://gishac.blogspot.com gish@c

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.

Open Source Resources for You

What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.

© Copyright 2012 WebAppers | About | Archives | Privacy Policy | Advertise | Contact