Toast Like Notification With Countdown Timer Bar - jQuery notificationManager

A notification manager for jQuery for creating toast-like, non-blocking notification popups with countdown timer bars.

You can customize the position and the parent container the notification popup should be placed in.

The plugin also enables you to create growl-style 'Sticky' notification popups that will always stay on the screen until manually closed.

Licensed under the Apache-2.

How to use it:

1. Link to jQuery library and the notification manager files as follows:

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<link rel="stylesheet" href="./notificationManager.css">
<script src="./notificationManager.js"></script>

2. Create a container where the notificaiton popups will appear.

<div id="notificationsContainer">
</div>

3. Initialize the plugin and define the container/holder of the notification popups, or use the document body.

var myNotify = new notificationManager({
    container: $( '#notificationsContainer'),
    message: "Notification message here"
});

4. Customize the position of the notification popups.

• topleft
• topright
• bottomleft
• bottom right

var myNotify = new notificationManager({
    container: $( '#notificationsContainer'),
    message: "Notification message here",
    position: "topleft"
});

5. Enable/disable the fade in/out animations.

var myNotify = new notificationManager({
    container: $( '#notificationsContainer'),
    message: "Notification message here",
    animate: true
});

6. Determine whether or not to close the notification popup after a timeout.

var myNotify = new notificationManager({
    container: $( '#notificationsContainer'),
    message: "Notification message here",
    autoremove: true
});

7. Customize the background color of the notification popup.

var myNotify = new notificationManager({
    container: $( '#notificationsContainer'),
    message: "Notification message here",
    backgroundColor: "#ff0000"
});

8. Customize the background color of the countdown timer bar.

var myNotify = new notificationManager({
    container: $( '#notificationsContainer'),
    message: "Notification message here",
    progressColor: "#333" 
});

Changelog:

2018-09-28

• Small changes

---

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