Create Floating Growl-Style Notifications with Flyaler jQuery Plugin

Flyaler is a lightweight and simple notification system for jQuery. It allows developers to create unobtrusive, "growl-style" notification boxes to notify users of various statuses or messages.

These notifications support different types, including success, error, danger, warning, and custom types. Each notification includes a title, description, and a countdown bar at the bottom to show the remaining time until it automatically closes (defaults to 5 seconds). 

The plugin provides a clean solution for user feedback, alerts, and real-time updates. It’s useful for displaying confirmation messages after form submissions, alerting users to errors, or providing brief status updates without interrupting their workflow.

How to use it:

1. Include jQuery and the Flyaler plugin's files on your webpage. Make sure jQuery is loaded before the Flyaler JavaScript:

<script src="/path/to/cdn/jquery.min.js"></script>
<link rel="stylesheet" href="/path/to//flyalert.css">
<script src="/path/to/flyalert.js"></script>

2. You can then trigger a notification by calling the flyalert() function. The function takes four parameters: the title, description, type of notification, and the duration before it dismisses itself (in seconds).

// flyalert(title,description,type='warning',time='5')
flyalert("Success","A Success Message",'success');
flyalert("Atention","A Warning Message",'warning');
flyalert("Error","An Error message. Auto-dismiss after 3 seconds",'error',3);
flyalert("Danger","A Danger message",'danger');

3. If you want to create a custom notification type, you can specify the custom styles in the CSS:

.flyalert .custom-title{
  background:#000000;
  color:#ffffff;
}

.flyalert .custom-description{
  background:#a1d99b;
  background-image: linear-gradient(90deg, rgb(190, 90, 247),rgb(22, 91, 145));
  color:#ffffff;
}

.flyalert .custom-loadingbar{
  background:#222222;
}

flyalert("Custom","this is CUSTOM message",'custom', 3);

See Also:

• 10 Best Growl Style Notification Plugins In JavaScript
• 10 Best Toast Notification jQuery/JavaScript Plugins

---

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