jGrowl 1.1.0

June 18th, 2008

Posted at 7:14am by Stan

I'm very happy to announce the immediate release of jGrowl 1.1.0.

This latest release features the ability to create multiple container instances for jGrowl, allowing a developer to raise and create various notifications in various location on the user's screen. This functionality is accessible via jGrowl() on any normal jQuery selector, note that the selector should belong to the container which holds notifications. Additionally the core method in previous releases, $.jGrowl() has been altered to create a default container. This should maintain backwards compatibility for users of previous releases and additionally provides a quick setup route for using jGrowl.

The demo file has been extensively updated to demonstrate the multi-container aspect of jGrowl, as well as to introduce several minor new features. It is highly recommend that you consult this demo file for further usage information. This release is still fully compatible with Internet Explorer 6.

Update 8/21/08: You can download jGrowl from it's jQuery plugin page at: http://plugins.jquery.com/project/jgrowl

javascript, jgrowl, jquery

Comments:

Posted on June 23, 2008 08:09pm by greg huddleston
Hi just discovered jGrowl and I think its pretty neat! Thanks. Tried a quick experiment to try to put a php variable (tried the time/date) onto a jGrowl window (as a means of testing changing variable data). No Joy... Wondering if this is possible or not ? TIA GHUdd
Posted on July 07, 2008 08:55am by Nicholas Canzoneri
The samples all completely crash Firefox 3, running Windows 2000.

It does indeed work fine in IE6 though.
Posted on July 07, 2008 09:14am by Stan
I'm assuming you're using firebug. They've not had a stable release for firefox 3 yet, and it has been known to interact with jGrowl and thrown unnecessarybexceptions. Try disabling firebug and it should work fine. Gmail has similar problems.
Posted on July 08, 2008 01:39pm by Eric
Looks like there might be a small typo in the css code

div.id6.center

in the context of the other rules looks like it should be "div.ie6.center"

Other then that it looks great. Seems to work fine in FF3 without firebug.
Posted on July 08, 2008 03:32pm by Stan
Thanks Eric, this will be fixed in the next release.
Posted on July 08, 2008 11:18pm by Adeptus
Does not work in IE7...
Work fine in FF-3 WITH FIREBUG!
Work in Opera 9.23 but no rounded corners...
Posted on July 08, 2008 11:23pm by Stan
It should work just fine in IE7, what type of issues are you experiencing. Also, regarding Opera, any idea how to round corners with CSS there? Do they have a proprietary attribute to do that?
Posted on July 22, 2008 11:43am by Lawrence Lagerlof
I am trying:

$.jGrowl("Hello world!", { position: 'center' });

but now works. The message appears in top-right corner, always.
Posted on July 25, 2008 04:04am by Arno Nyhm
i like your jGrowl andi have this ideas:

- why you dont name the callbacks like other callbacks named usual: close -- onClose / open -- onOpen

- i would like to use jGrowl to show messages and CLOSE it late. it can be done in 2 way:
--- if i open a message, then i get a reference back on witch i can use a .close() method:

mySticky = $.jGrowl("Stick this!", { sticky: true });
[...]
mySticky.close()

--- if i open a message i also past a identifier with it. later i can use this identifier to close it:

$.jGrowl("Stick this!", { id: "stiky123423" });
$.jGrowl().closeStikyById("stiky123423");


--> if i can use a reference to each jGrolMessage then it could also nice to have some nice changing options like.

mySticky = $.jGrowl("Stick this!", { sticky: true });
mySticky.setHeader("New Header")
mySticky.setText("New Text");
mySticky.setTheme("newCssTheme")
Posted on July 25, 2008 09:03am by Stanley C. Lemon
Arno,
The naming scheme follows that of jQuery UI, which does not use the "on" prefix for callbacks. Additionally, there is a beforeClose() callback, which seems like what you're asking about...?

Regarding changing the notification after it has been created... If you use a standard jGrowl setup you can do...
$('#jGrowl div.jGrowl-notification:last div.header').text("Change the text here...")

Everything is accessible by a normal jQuery selector, so there's no need for those methods - you can just call native jQuery methods.

Hope this helps,
SL
Posted on July 28, 2008 10:19am by Arno Nyhm
but how i can close a specific message? i like the message stay until i close it. but i have no guess wich one i have to close. with the normal jquery selector i the the :last or the :first but not my specific selector.

it would helps if it have some id for it. then i can use standard jQuery methods to hide it.

example:
$.jGrowl("Stick this!", { id: "stiky123423" });
or
$.jGrowl("Stick this!", { class: "stiky123423" });
then i can use the jqery syntac to close it via my id or via my classname
Posted on July 28, 2008 10:28am by Stan
I will look into adding unique ID's in a future release.

That said, what you're trying to accomplish can still be done through jQuery selectors. As for the class, this is already done through the "theme" property, take a look at the documentation and usage examples for further information.

Pax,
SL
Posted on July 29, 2008 10:22am by Arno Nyhm
thanks for pointing to the docs.

i see with this i can set a custon css clas:

Option Name: theme
Default Value: default
Explanation: A CSS class designating custom styling for this particular message.

Post Comment:


Enter the code you see in the image below.