Sliding Toast Notification In JavaScript – toaster-box.js

Category: Javascript , Notification | October 19, 2020
Author:kvinbabbar
Views Total:1,309 views
Official Page:Go to website
Last Update:October 19, 2020
License:MIT

Preview:

Sliding Toast Notification In JavaScript – toaster-box.js

Description:

A minimal yet configurable toast JavaScript library for creating toast-like notification boxes with slide and fade animations on the page.

Features:

  • Supports HTML content.
  • Configurable delay timeout.
  • Custom close icon.
  • Custom position.
  • Shows the toast notification on page load or not.

How to use it:

1. Load the stylesheet toaster-box.css and JavaScript toaster-box.js in the HTML document.

<link rel="stylesheet" href="toaster-box.css" />
<script src="toaster-box.js"></script>

2. Display a basic toast notification on the page. The message supports both plain text and HTML content:

new ToasterBox({ 
    msg: 'Toast Message Here' 
});
new ToasterBox({ 
    msg: '<strong>Toast</strong> Message Here',
    html : true
});

3. Determine the delay timeout in ms. By default, the toast notification will auto dismiss after 3 seconds.

new ToasterBox({ 
    msg: 'Toast Message Here',
    duration: 5000
});

4. Determine whether to show the close button. Default: true.

new ToasterBox({ 
    msg: 'Toast Message Here',
    closeButton: false
});

5. Customize the close icon.

new ToasterBox({ 
    msg: 'Toast Message Here',
    closeIcon: '<img src='./close.svg' alt='close icon' width='20' class='inverted'/>'
});

6. Determine whether to show the toast notification on page load. Default: true.

new ToasterBox({ 
    msg: 'Toast Message Here',
    autoOpen: false
});

7. Determine the position of the toast notification: ‘top-left’, ‘top-center’, ‘top-right’, ‘bottom-left’, ‘bottom-center’, ‘bottom-right’.

new ToasterBox({ 
    msg: 'Toast Message Here',
    position: 'bottom-center'
});

8. Set the max width of the toast notification. Default: 450.

new ToasterBox({ 
    msg: 'Toast Message Here',
    maxWidth: 350
});

9. Apply additional CSS class to the toast notification.

new ToasterBox({ 
    msg: 'Toast Message Here',
    className: 'your classes here'
});

You Might Be Interested In:


Leave a Reply