Elegant Toast Notification Library For jQuery - Notify

File Size: 21.9 KB
Views Total: 2442
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Elegant Toast Notification Library For jQuery - Notify

Notify is a small jQuery notification plugin used to create Material Toast like notification messages sliding in/out from the edge of your screen.

Key features:

  • success, info, error, warn notification types.
  • Auto dismisses after a timeout, with a countdown bar.
  • LTR and RTL support.
  • Open/close callbacks.
  • Customize the position of the notification.

How to use it:

1. Link to jQuery library and the Notify plugin's files as follows:

<link href="dist/jquery.notify.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="dist/jquery.notify.js"></script>

2. Create a default toast notification on the webpage. This toast notification will auto dismiss after 4 seconds.

$.notify();

3. All possible options which let you create your own toast notifications.

$.notify({

  // where to append the toast notification
  wrapper: 'body',

  // toast message
  message: 'Your request submitted successfuly!',

  // success, info, error, warn
  type: 'success',

  // 1: top-left, 2: top-center, 3: top-right
  // 4: mid-left, 5: mid-right
  // 6: bottom-left, 7: bottom-center, 8: bottom-right
  position: 1,

  // or 'rtl'
  dir: 'ltr',

  // enable/disable auto close
  autoClose: true,

  // timeout in milliseconds
  duration: 4000
  
});

4. Perform actions when the toast notification opens/closes.

$.notify({

  onOpen: null, // function
  onClose: null // function

});

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