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