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="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<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',
  closer: false,
  closeTemplate: '',
  closerTemplate: '<div>[ close all ]</div>',
  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() {},

});

Changelog:

2019-12-06

• Fixed text overflow issue with long strings

v1.2.0 (2018-11-30)

• Add new theme and remove icon option

---

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