Minimal Notification Plugin with Sound Effects - notify

File Size: 24.7 KB
Views Total: 3965
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal Notification Plugin with Sound Effects - notify

Notify is a minimalist jQuery plugin helps you create various types of notification messages while playing a sound effect you specify.

How to use it:

1. Place the required stylesheet in the head section of the document.

<link href="css/jquery.notify.css" rel="stylesheet">

2. Create custom messages and specify the notification types using data-notify-type attribute.

<p class="notify" data-notify-type="error">Error!</p>
<p class="notify" data-notify-type="notice">Notice!</p>
<p class="notify" data-notify-type="warning">Warning!</p>
<p class="notify" data-notify-type="success">Success!</p>

3. Place jQuery JavaScript library and the jQuery notify.js plugin at the bottom of the webpage.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.notify.js"></script>

4. Shows the notification messages on your screen.

$('.notify').notify();

5. Replace the sound effect.

$.notifySetup({sound: 'audio/notify.wav'});

6. More configuration options.

$('.notify').notify({
  inEffect: {
    opacity: 'show'
  },
  inEffectDuration: 100,
  stay: 5000,
  sticky: false,
  type: 'notice',
  position: 'top-right',
});

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