Growl Notifications
Default Notifications
(new GrowlNotification({
title: 'Hello!',
description: 'I am a default notification.',
type: 'alert',
position: 'top-right',
closeTimeout: 0
})).show();
(new GrowlNotification({
title: 'Well Done!',
description: 'You just submit your resume successfully.',
type: 'success',
position: 'top-right',
closeTimeout: 0
})).show();
(new GrowlNotification({
title: 'Warning!',
description: 'The data presentation here can be change.',
type: 'error',
position: 'top-right',
closeTimeout: 0
})).show();
(new GrowlNotification({
title: 'Reminder!',
description: 'You have a meeting at 10:30 АМ',
type: 'warning',
position: position,
closeTimeout: closeTimeout
})).show();
(new GrowlNotification({
title: 'Sorry!',
description: 'Could not complete your transaction.',
image: 'img/notifications/05.png',
type: 'info',
position: 'top-right,
closeTimeout: 0
})).show();
Notifications with icons
(new GrowlNotification({
title: 'Hello!',
description: 'I am a default notification.',
type: 'alert',
image: 'img/notifications/01.png',
position: 'top-right',
closeTimeout: 0
})).show();
(new GrowlNotification({
title: 'Well Done!',
description: 'You just submit your resume successfully.',
image: 'img/notifications/03.png',
type: 'success',
position: 'top-right',
closeTimeout: 0
})).show();
(new GrowlNotification({
title: 'Warning!',
description: 'The data presentation here can be change.',
image: 'img/notifications/04.png',
type: 'error',
position: 'top-right',
closeTimeout: 0
})).show();
(new GrowlNotification({
title: 'Reminder!',
description: 'You have a meeting at 10:30 АМ',
image: 'img/notifications/02.png',
type: 'warning',
position: 'top-right',
closeTimeout: 0
})).show();
(new GrowlNotification({
title: 'Sorry!',
description: 'Could not complete your transaction.',
image: 'img/notifications/05.png',
type: 'info',
position: 'top-right',
closeTimeout: 0
})).show();
Available options listed below.
| Option | Default | Info |
|---|---|---|
| type: string | 'alert' | alert, success, error, warning, info |
| position: string | 'top-right' | top-left, top-right, bottom-left, bottom-right |
| title: string | '' | This string can contain HTML too. But be careful and don't pass user inputs to this parameter. |
| description: string | '' | This string can contain HTML too. But be careful and don't pass user inputs to this parameter. |
| image: string | '' | Path to image. |
| closeTimeout: boolean,int | false | false, 1000, 3000, 3500, etc. Delay for closing event in milliseconds (ms). Set 'false' for sticky notifications. |
| closeWith: [...string] | ['click'] | click, button |
| animation.open: string,null | 'slide-in' | If string, assumed to be CSS class name. If null, no animation at all. |
| animation.close: string,null | 'slide-out' | If string, assumed to be CSS class name. If null, no animation at all. |