jGrowl – Unobtrusive Notification System for jQuery
07 Jul
Posted by Ray Cheung as 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
- Brushes (11)
- Buttons (21)
- Color Schemes (21)
- Fonts (39)
- Forms (95)
- Icons (84)
- Patterns (24)
- PS Tutorials (9)
- Stock Photos (19)
- Tables (23)
- Announcement (70)
- Best Collections (4)
- Code (44)
- eCommerce (19)
- Framework (156)
- Hosting (12)
- Information (161)
- Inspiration (27)
- Legal Documents (8)
- Reviews (8)
- Security (13)
- Social (19)
- Sound (12)
- Stats (32)
- Tools (190)
- Webmail (13)
- BSD License (51)
- CC License (111)
- GPL License (189)
- LGPL License (37)
- License Free (584)
- MIT License (274)
Search Site
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 2010 WebAppers
Sponsored by NetDNA Content Delivery Network
Recommended Books for Web Developers
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…
Cool, I like that. Thanks for the link.
[...] jGrowl – Unobtrusive Notification System for jQuery jGrowl is a jQuery plugin that raises unobtrusive messages within the browser, similar to the way that OS X’s Growl Framework works. (tags: jquery notification) [...]
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.
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!
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
@Stan: Thank you!
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)
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.
[...] jGrowl – Unobtrusive Notification System for jQuery | Web Resources | WebAppers (tags: jquery javascript notification growl script) [...]
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?
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
[...] jQrowl [...]
[...] jgrowl [...]
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
[...] jQrowl [...]
Excellent plugin!
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.
RSS feed for comments on this post · TrackBack URI