Growl Notifications

Default Notifications

GrowlNotification.notify({
  description: 'I am a default notification.',
}); // or (new GrowlNotification(options)).show();

GrowlNotification.notify({
  title: 'Hello!',
  description: 'I am a default notification.',
  type: 'alert',
  position: 'top-right',
  closeTimeout: 0
}); // or (new GrowlNotification(options)).show();

GrowlNotification.notify({
  title: 'Well Done!',
  description: 'You just submit your resume successfully.',
  type: 'success',
  position: 'top-right',
  closeTimeout: 0
});

GrowlNotification.notify({
  title: 'Warning!',
  description: 'The data presentation here can be change.',
  type: 'error',
  position: 'top-right',
  closeTimeout: 0
});

GrowlNotification.notify({
  title: 'Reminder!',
  description: 'You have a meeting at 10:30 АМ',
  type: 'warning',
  position: position,
  closeTimeout: closeTimeout
});

GrowlNotification.notify({
  title: 'Sorry!',
  description: 'Could not complete your transaction.',
  image: 'img/info.png',
  type: 'info',
  position: 'top-right,
  closeTimeout: 0
});

Notifications with icons

GrowlNotification.notify({
  title: 'Hello!',
  description: 'I am a default notification.',
  type: 'alert',
  image: 'img/default.png',
  position: 'top-right',
  closeTimeout: 0
});

GrowlNotification.notify({
  title: 'Well Done!',
  description: 'You just submit your resume successfully.',
  image: 'img/success.png',
  type: 'success',
  position: 'top-right',
  closeTimeout: 0
});

GrowlNotification.notify({
  title: 'Warning!',
  description: 'The data presentation here can be change.',
  image: 'img/danger.png',
  type: 'error',
  position: 'top-right',
  closeTimeout: 0
});

GrowlNotification.notify({
  title: 'Reminder!',
  description: 'You have a meeting at 10:30 АМ',
  image: 'img/warning.png',
  type: 'warning',
  position: 'top-right',
  closeTimeout: 0
});

GrowlNotification.notify({
  title: 'Sorry!',
  description: 'Could not complete your transaction.',
  image: {
    visible: true,
    customImage: 'img/info.png'
  },
  type: 'info',
  position: 'top-right',
  closeTimeout: 0
});

Available options listed below.

Option Default Info
width: number|string null Custom width for notification 100px, 50% and etc.
zIndex: number 1056 Custom z-index for notifications
type: string 'alert' alert, success, error, warning, info
position: string 'top-right' top-left, top-right, bottom-left, bottom-right, top-center, bottom-center
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.visible: boolean false Show/Hide image
image.customImage: string '' Path to custom 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,false 'slide-in' If string, assumed to be CSS class name. If false|null|'none', no animation at all. 'slide-in', 'fade-in'
animation.close: string,null,false 'slide-out' If string, assumed to be CSS class name. If false|null|'none', no animation at all. 'slide-out', 'fade-out'
showButtons: true,false false Show or hide buttons
buttons: object 
buttons: {
    action: {
        text: 'Ok',
        callback: function {} // callback
    },
    cancel: {
        text: 'Cancel',
        callback: function {} // callback
    }
}
 Buttons configuration
showProgress: true,false false Show or hide progress bar
GrowlNotification.setGlobalOptions: object {} Set global options for all notifications
GrowlNotification.closeAll - Close all notifications