Create Fast Toast-like Alerts with Hazel jQuery Plugin

Hazel is a brilliant tiny jQuery plugin for creating mounted, toast-like notification popups that disappear robotically after a set time.

It comes with 5 built-in themes: Major, Success, Darkish, Hazard, and Warning. You may as well customise the present themes or add your personal, which supplies you flexibility in how the notifications look. 

What I like is that the CSS is included throughout the JavaScript file itself. This implies I haven’t got to incorporate a separate stylesheet, which retains issues tidy.

Methods to use it:

1. Obtain the plugin and embody the hazel.js script after you have loaded the most recent jQuery library.

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

2. You may then use the hazel technique to create a toast notification. Accessible parameters:

• message: Toast Message
• sort: Major, Success, Error, Hazard, or Warning
• period: Auto dismiss after this timeout

// hazel(message, sort="success", period = 2000)
$(this).hazel('This can be a hazard notification', 'hazard', 5000);

3. You may outline your personal notification types by offering a customized shade for every sort:

var typeStyles = {
    success: '#0c8',
    warning: '#ff8c00',
    hazard: '#f36',
    darkish: '#0f172a',
    major: '#8957ff'
    customized: '#222'
};

$(this).hazel('This can be a customized notification', 'customized', 5000);

4. By default, the notification seems on the high of the web page. I desire to have it on the backside, so I modified the positioning code like this:

if ($notification.size === 0) {
  $notification = $('<div>', {
      id: 'hazel-notification',
      css: {
          place: 'mounted',
          backside: '20px',
          left: '50%',
          remodel: 'translateX(-50%)',
          padding: '20px',
          'border-radius': '15px',
          'z-index': 1000,
          show: 'none',
          'white-space': 'nowrap'
      }
  }).appendTo('physique');
}

This superior jQuery plugin is developed by ali-aydin. For extra Superior Usages, please verify the demo web page or go to the official web site.