jGrowl.1.2 - Introduction

JGrowl is a plugin for the well-known jQuery. It allows you to display small messages within the browser page. Just as it works in the Growl Framework .

In order to start working with jGrowl, you need to download this very jGrowl.
You can download it from the official site of the developer stanlemon.net

On this site you can see an example of using jGrowl.
LtbLinks.Ru
There it is used to display ads.
')


Next, write in your html:
[script type="text/javascript" src="jquery-1.2.6.js"][/script]
[script type="text/javascript" src="jquery.jgrowl.js"][/script]
[link rel="stylesheet" href="growl.css" type="text/css" /]

Everything! Now you can shkodit :)

A simple example:
$(document).ready(function(){

$.jGrowl("Hello world!");
// Sample 2
$.jGrowl("Stick this!", { sticky: true });
// Sample 3
$.jGrowl("A message with a header", { header: 'Important' });
// Sample 4
$.jGrowl("A message that will live a little longer.", { life: 10000 });
// Sample 5
$.jGrowl("A message with a beforeOpen callback and a different opening animation.", {
beforeClose: function(e,m) {
alert('About to close this notification!');
},
animateOpen: {
height: 'show'
}
});

});

No comments! :) Further, see options.

jGrowl Options:

In brackets the default value

header [Empty line]
This option sets the message header.
Example:
$.jGrowl(' ', {Header: ' '} );

sticky [false]
If set to true, then the notification will be displayed on the screen until it is closed by the user. If set to false, the message will disappear immediately after the expiration of its lifetime, which is set using the life parameter.

glue [after]
This option determines how the notification will be inserted into the jGrowl container. If after is specified, the notification is inserted after notifications in the container. If before, then before notifications in container.

position [top-right]
Specifies the class applied to the jGrowl container and controls its position on the screen. By default, several options are available - this is top-left, top-right, bottom-left, bottom-right, center. This option must be set before running the method that causes the notification.
Example:
In order for notifications to be displayed in the center of the screen, you need to write this:
$.jGrowl.defaults.position = 'center';

theme [default]
Defines a CSS class that defines the appearance of the displayed notification.
Example:

div.jGrowl div.red_theme {
background-color: #F00;
color: #FFF;
}

$.jGrowl('', { theme: 'red_theme'});

corners [10px]
If the jQuery plugin skrivlyayuschy corners is connected, then using this option you can adjust the radius of the rounding corners for notification.
A plugin to take here: CORNERS

check [1000]
Specifies the frequency with which jGrowl will check for messages to be removed from the screen.
Example:
The best option for this parameter would be the minimum notification lifetime. In this example, it is 3 seconds.
$.jGrowl.defaults.check = 3000;

life [3000]
Defines the lifetime of the notification on the screen. That is, the time after which jGrowl will consider it to be subject to cleaning and after which it will be deleted during the next check.

speed [normal]
Determines the speed of the animation when opening and closing the notification.

easing [swing]
Determines how to animate when opening and closing notifications. By default, all animation methods are available, as for the jquery library's animate method.

closer [true]
Determines whether the close-all button should be displayed when more than one notification appears on the screen, true is displayed, false is not displayed. You can also assign a callback function, which will be triggered when you press the close-all button.
Example:
$.jGrowl.defaults.closer=true;

closeTemplate [amp; times;]
The option contains a special character that is used for the close button for notification. The default is to use the special symbol amp; times; which corresponds to the sign of multiplication.
Example:
$.jGrowl("Hello world!", {closeTemplate: 'A'});

closerTemplate [[close all]]
This content is used to create a close-all link that is added by default from the bottom of the jGrowl container, and is used to close all notifications in the container.
Example:
$ .jGrowl.closerTemplate = "Close all notifications";

log [function (e, m, o) {}]
Defines a callback function that triggers before others when a notification appears. This provides the user with a convenient mechanism for logging all jGrowl notifications. The function takes three parameters: a notification as a DOM element, a notification message, and options.
Example:
div logs, .

:
$(e).attr('id') - id ,
(new Date()).getTime() - ,
m - ,
o.theme -

$.jGrowl.defaults.log = function(e,m,o) {
$('#logs').append(" " + $(e).attr('id') + " " + (new Date()).getTime() + " : " + m + " (" + o.theme + ")")
}

beforeOpen [function (e, m, o) {}]
Specifies the callback function that will be triggered before a new notification is opened. The function takes three parameters: a notification as a DOM element, a notification message, and options.

open [function (e, m, o) {}]
Specifies the callback function that will be triggered when a new notification is opened. The function takes three parameters: a notification as a DOM element, a notification message, and options.

beforeClose [function (e, m, o) {}]
Specifies the callback function that will be triggered before closing the notification. The function takes three parameters: a notification as a DOM element, a notification message, and options.

close [function (e, m, o) {}]
Specifies the callback function that will be triggered when a new notification is opened. The function takes three parameters: a notification as a DOM element, a notification message, and options.
Example:
When you close the notification, it will highlight an alert with the same message.
$.jGrowl.('Hellow World', close: function(e,m,o){
alert(m);
}

animateOpen [{opacity: 'show'}]
Animation property used when opening a notification (the default is “manifestation”).

animateClose [{opacity: 'hide'}]
Animation property used when closing a notification (the default is “fading”).

Test results:
IE7 - no rounded corners, no transparency
FF2 - all in a lot
FF3 - all in a lot
Opera 9.27 - not rounded corners, all text in black
Opera 9.63 - no rounded corners, all text in black

It was possible to solve the problem with black in Opera.
It is necessary to prescribe the text color of the element in the document itself, using tags
[style type = "text / css"] p {color: white;} [/ style]
And the color should not be written in a hexadecimal system, but in text.