Create Quick Toast-like Alerts with Hazel jQuery Plugin

Hazel is a super tiny jQuery plugin for creating fixed, toast-like notification popups that disappear automatically after a set time.

It comes with five built-in themes: Primary, Success, Dark, Danger, and Warning. You can also customize the existing themes or add your own, which gives you flexibility in how the notifications look. 

What I like is that the CSS is included within the JavaScript file itself. This means I don't have to include a separate stylesheet, which keeps things tidy.

How to use it:

1. Download the plugin and include the hazel.js script after you've loaded the latest jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/hazel.js"></script>

2. You can then use the hazel method to create a toast notification. Available parameters:

• message: Toast Message
• type: Primary, Success, Error, Danger, or Warning
• duration: Auto dismiss after this timeout

// hazel(message, type = 'success', duration = 2000)
$(this).hazel('This is a danger notification', 'danger', 5000);

3. You can define your own notification styles by providing a custom color for each type:

var typeStyles = {
    success: '#0c8',
    warning: '#ff8c00',
    danger: '#f36',
    dark: '#0f172a',
    primary: '#8957ff'
    custom: '#222'
};

$(this).hazel('This is a custom notification', 'custom', 5000);

4. By default, the notification appears at the top of the page. I prefer to have it at the bottom, so I modified the positioning code like this:

if ($notification.length === 0) {
  $notification = $('<div>', {
      id: 'hazel-notification',
      css: {
          position: 'fixed',
          bottom: '20px',
          left: '50%',
          transform: 'translateX(-50%)',
          padding: '20px',
          'border-radius': '15px',
          'z-index': 1000,
          display: 'none',
          'white-space': 'nowrap'
      }
  }).appendTo('body');
}

Changelog:

2024-11-18

• Update JS

2024-11-16

• Notifications now stack

---

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