macOS Like Growl Notification Plugin With jQuery - jnoty

macOS Like Growl Notification Plugin With jQuery - jnoty

jnoty is a small jQuery notification plugin which helps you create macOS-like Growl Notifications with varying themes (Success, Warning, Info, Danger) on your web app.

More features:

  • Auto dismisses after a timeout, similar to the toaster.
  • Allows to set where the notification should append to.
  • CSS easing functions.
  • Custom icons: You can use any Iconic Font like Font Awesome.
  • Open/close animations.
  • Useful callback functions.

How to use it:

1. Include jQuery library and the jnoty plugin's files on the html page.

<script src="" 
<script src="jnoty.js"></script>
<link rel="stylesheet" href="jnoty.css">

2. Create a default notification that will auto dismiss after 3 seconds.

$.jnoty("Notification Message Here");

3. Choose a theme for the growl notification.

$.jnoty("Notification Message Here.", {
  // success, warning, info, danger
  theme: 'success'

4. To override the default timeout:

$.jnoty("Notification Message Here.", {
  life: 3000 // 3 seconds

5. If you want a 'Sticky' notification that always stays on the screen until you click the 'x' button.

$.jnoty("Notification Message Here.", {
  sticky: true

6. Add a custom icon to the notification.

$.jnoty("Notification Message Here.", {
  icon: 'fa fa-check-circle' // font awesome icon

7. Change the default position your notifications should appear.

$.jnoty("Notification Message Here.", {
  position: 'top-right',

8. All default config options.

$.jnoty("Notification Message Here.", {
  pool:               0,
  header:             '',
  group:              '',
  sticky:             false,
  position:           'top-right',
  appendTo:           'body',
  glue:               'after',
  theme:              'default',
  themeState:         'highlight',
  corners:            '10px',
  check:              250,
  life:               3000,
  closeDuration:      'normal',
  openDuration:       'normal',
  easing:             'swing',
  animateOpen:        {
    opacity:        'show'
  animateClose:       {
    opacity:        'hide'

9. Callback functions.

$.jnoty("Notification Message Here.", {
  log:                function() {},
  beforeOpen:         function() {},
  afterOpen:          function() {},
  open:               function() {},
  beforeClose:        function() {},
  close:              function() {},
  click:              function() {},

This awesome jQuery plugin is developed by visualapps. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 18.04.2018
  • Source