#### Extra - jGrowl & Noty

Statistics Invoices Schedule

##### Noty notifications

Noty is a jQuery plugin that makes it easy to create `alert` - `success` - `error` - `warning` - `information` - `confirmation` messages as an alternative the standard alert dialog. The API provides lots of other options to customise the text, animation, speed, buttons and much more. It also has various callbacks for the buttons such as opening and closing the notifications and queue control.

Notification layouts
Error notice |  | Error notification. To use, add `type: 'error'` option to the notification configuration
Success notice |  | Success notification. To use, add `type: 'success'` option to the notification configuration
Warning notice |  | Warning notification. To use, add `type: 'warning'` option to the notification configuration
Information notice |  | Info notification. To use, add `type: 'info'` option to the notification configuration
Alert notice |  | Simple alert layout. To use, add `type: 'alert'` option to the notification configuration
Confirmation dialog |  | Confirmation dialog with buttons and callbacks. To use, add `type: 'confirm'` option to the notification configuration
Notification position. Top
Top position |  | Top notification position. To use, add `layout: 'top'` option to the notification configuration
Top left position |  | Top left notification position. To use, add `layout: 'topLeft'` option to the notification configuration
Top center position |  | Top center notification position. To use, add `layout: 'topCenter'` option to the notification configuration
Top right position |  | Top right notification position. To use, add `layout: 'topRight'` option to the notification configuration
Notification position. Center
Center left position |  | Center left notification position. To use, add `layout: 'centerLeft'` option to the notification configuration
Center position |  | Center notification position. To use, add `layout: 'center'` option to the notification configuration
Center right position |  | Center right notification position. To use, add `layout: 'centerRight'` option to the notification configuration
Notification position. Bottom
Bottom left position |  | Bottom left notification position. To use, add `layout: 'bottomLeft'` option to the notification configuration
Bottom center position |  | Bottom center notification position. To use, add `layout: 'bottomCenter'` option to the notification configuration
Bottom right position |  | Bottom right notification position. To use, add `layout: 'bottomRight'` option to the notification configuration
Bottom position |  | Bottom notification position. To use, add `layout: 'bottom'` option to the notification configuration
Other examples
Overlay |  | To display a dark page overlay when notification is shown, set `modal` to `true` in noty config
Sticky |  | Set `timeout` option to `false` to disable timer. Progress bar will be also disabled
Close button |  | By default, notification is closable on click. To use close button instead, use `closeWith: ['button']` option
No progress |  | Noty's `progressBar` option displays a progress bar if timeout is not false. Set to `false` to disable
Styled |  | To use styled theme, add `alert alert-danger alert-styled-left p-0` classes to `theme` option
Styled white |  | To use styled theme with white background, add `alert alert-success alert-styled-left p-0 bg-white` classes to `theme` option
Solid styled |  | To use solid styled theme, add `alert bg-info text-white alert-styled-left p-0` classes to `theme` option

##### jGrowl notifications

jGrowl is a pretty flexible and easy to use jQuery plugin that raises unobtrusive messages within the browser, similar to the way that OS X's Growl Framework works. The idea is simple, deliver notifications to the end user in a noticeable way that doesn't obstruct the work flow and yet keeps the user informed. Supports 6 screen positions, 5 contextual color alternatives and various options.

Solid color notifications
Default notice |  | Basic configuration using `theme: 'bg-primary'` theme added to the config
Danger notice |  | Danger notification. To use, add `theme: 'bg-danger'` option to the notification configuration
Success notice |  | Success notification. To use, add `theme: 'bg-success'` option to the notification configuration
Warning notice |  | Warning notification. To use, add `theme: 'bg-warning'` option to the notification configuration
Info notice |  | Info notification. To use, add `theme: 'bg-info'` option to the notification configuration
Basic notification styling
Default notice |  | Default notification style. To use, add `theme: 'alert-*'` contextual class to the plugin configuration
Left icon |  | Notification with left icon. To use, add `'alert-styled-left'` with contextual class to the `theme` option
Right icon |  | Notification with right icon. To use, add `'alert-styled-right'` with contextual class to the `theme` option
Custom styles |  | Notification with custom color variations of text, border and background
Display arrow |  | Display arrow. To use, add `'alert-arrow-left'` or `*-right` to the `theme` option
Additional styles
Notice with left icon |  | Solid color notification with left icon. To use, add `'bg-* alert-styled-left'` to the `theme` option
Notice with right icon |  | Solid color notification with right icon. To use, add `'bg-* alert-styled-right'` to the `theme` option
Custom colors |  | Alert sith custom styles. To use, add `'alert-styled-custom'` with other classes to the `theme` option
Rounded alert |  | Alert with rounded corners. To use, add `'alert-rounded'` to the `theme` option
jGrowl options
Sticky notice |  | When set to `true` a message will stick to the screen until it is intentionally closed by the user
Long life |  | The lifespan of a non-sticky message on the screen. In current example it is 10 seconds
Animation speed |  | The animation speed used to open and close a notification. In current example it is `100ms`
Callbacks |  | All callbacks receive the notification's DOM context, the notifications message and it's option object. Check out your `console`
jGrowl positions
Top left position |  | Top left notification position. To use, add `position: 'top-left'` option to the notification config
Top center position |  | Top center notification position. To use, add `position: 'top-center'` option to the notification config
Top right position |  | Top right notification position. To use, add `position: 'top-right'` option to the notification config
Page center position |  | Center notification position. To use, add `position: 'center'` option to the notification config
Bottom left position |  | Bottom left notification position. To use, add `position: 'bottom-left'` option to the notification config
Bottom center position |  | Bottom center notification position. To use, add `position: 'bottom-center'` option to the notification config
Bottom right position |  | Bottom right notification position. To use, add `position: 'bottom-right'` option to the notification config