Victoria Baker
Senior developer
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 |
|