Skip to content

Create toast notifications with pure JavaScript

We are going to create a toast notifications plugin with pure JavaScript in this tutorial. A toast notification is a small message that is shown over other contents.

This notification plugin is able to show different messages. Notifications can be shown during a limited time, this is visualized by a progress bar. A notification that gets focus will restart it’s self-destruction process. A notification can be closed and all notifications can be removed by calling the clear method.

This plugin depends on annytab.effects and Font Awesome, these dependencies can easily be replaced by you if you want to use other icons and/or another library for effects.

This plugin has been tested and is working with Google Chrome (75.0.3770.100), Mozilla Firefox (67.0.4), Microsoft Edge (42.17134.1.0), without any polyfill. It works in Internet Explorer (11.829.17134.0) with a polyfill for CustomEvent. If you want to support older browsers, check out our post on transpilation and polyfilling of JavaScript.

Toast notifications

JavaScript

This plugin does not have a constructor, it is static and can be used by calling the public methods: setOptions, show and clear. Notifications is created in a container and the container is removed when the last message is removed.

  1. var annytab = annytab || {};
  2. annytab.notifier = (function () {
  4.     'use_strict';
  6.     // Variables
  7.     var options = { duration: 10000, position: 'top-center', fade_duration: 1000 };
  8.     var container = null;
  9.     
  10.     // Update options
  11.     function updateOptions(opts)
  12.     {
  13.         // Set default values for parameters
  14.         opts = opts || {};
  16.         // Update options
  17.         for (var option in options)
  18.         {
  19.             if (opts.hasOwnProperty(option) === true)
  20.             {
  21.                 options[option] = opts[option];
  22.             }
  23.         }
  25.         // Return options
  26.         return options;
  28.     } // End of the updateOptions method
  30.     // Create a box
  31.     function create(type, message)
  32.     {
  33.         // Make sure that a container exists
  34.         if (container === null)
  35.         {
  36.             container = document.createElement('div');
  37.             container.setAttribute('class', 'annytab-notifier-container annytab-notifier-' + options.position);
  38.             document.body.appendChild(container);
  39.         }
  41.         // Set icon (Font Awesome)
  42.         var icon = '<i class="fas fa-exclamation fa-fw"></i>';
  43.         if (type === 'success') { icon = '<i class="fas fa-check-circle fa-fw"></i>'; }
  44.         else if (type === 'warning') { icon = '<i class="fas fa-exclamation-triangle fa-fw"></i>'; }
  45.         else if (type === 'info') { icon = '<i class="fas fa-info-circle fa-fw"></i>'; }
  47.         // Create a box
  48.         var box = document.createElement('div');
  49.         box.setAttribute('class', 'annytab-notifier-box annytab-notifier-' + type);
  50.         box.insertAdjacentHTML('beforeend',
  51.             '<div class="annytab-notifier-padding">'
  52.             + '<div class="annytab-notifier-icon">' + icon + '</div>'
  53.             + '<div class="annytab-notifier-message">'
  54.             + message
  55.             + '</div>'
  56.             + '<div class="annytab-notifier-progress"></div>'
  57.             + '<div class="annytab-notifier-close"></div >');
  58.             + '</div>';
  59.         container.appendChild(box);
  61.         // Fade in the message box
  62.         annytab.effects.fadeIn(box, options.fade_duration, 'block');
  64.         // Add events
  65.         addBoxEvents(box);
  67.         // Return the box
  68.         return box;
  70.     } // End of the create method
  72.     // Add box events
  73.     function addBoxEvents(box)
  74.     {
  75.         // Variables
  76.         var close_button = box.querySelector('.annytab-notifier-close');
  77.         var progress = box.querySelector('.annytab-notifier-progress');
  78.         var progress_interval = null;
  79.         var close_timeout = null;
  81.         // Add a close event
  82.         window.onload = close_button.addEventListener('click', function (event) {
  84.             // Prevent default click behaviour
  85.             event.preventDefault();
  87.             // Close the box
  88.             close(box);
  90.         }, false);
  92.         // Check if the box should self destruct
  93.         if (options.duration > 0)
  94.         {
  95.             // Add self destruction event
  96.             window.onload = box.addEventListener('mouseleave', function (event) {
  98.                 // Prevent default click behaviour
  99.                 event.preventDefault();
  101.                 // Check if the box is closing
  102.                 if (annytab.effects.isVisible(close_button) === false) {
  103.                     return;
  104.                 }
  106.                 // Display the progress bar
  107.                 progress.style.display = 'block';
  109.                 // Calculate the amount to decrease each interval
  110.                 var width = 100;
  111.                 var decrease = width / options.duration * 10;
  113.                 // Set an interval to show progress
  114.                 progress_interval = window.setInterval(function () {
  115.                     width -= decrease;
  116.                     progress.style.width = width + '%';
  118.                 }, 10);
  120.                 // Self destruct after some time
  121.                 close_timeout = window.setTimeout(function () {
  123.                     // Clear timeout and interval
  124.                     clearTimeout(close_timeout);
  125.                     clearInterval(progress_interval);
  127.                     // Close the box
  128.                     close(box);
  130.                 }, options.duration);
  132.             }, false);
  134.             // On focus
  135.             window.onload = box.addEventListener('mouseenter', function (event) {
  137.                 // Prevent default click behaviour
  138.                 event.preventDefault();
  140.                 // Check if the box is closing
  141.                 if (annytab.effects.isVisible(close_button) === false)
  142.                 {
  143.                     return;
  144.                 }
  146.                 // Clear timeout and interval
  147.                 clearTimeout(close_timeout);
  148.                 clearInterval(progress_interval);
  150.                 // Reset progress bar
  151.                 progress.style.display = 'none';
  152.                 progress.style.width = '100%';
  154.             }, false);
  156.             // Trigger a mouse leave event
  157.             box.dispatchEvent(new Event('mouseleave'));
  158.         }
  160.     } // End of the addBoxEvents method
  162.     // Close a box
  163.     function close(box)
  164.     {
  165.         // Get the close button
  166.         var close_button = box.querySelector('.annytab-notifier-close');
  168.         // Check if the box is closing
  169.         if (annytab.effects.isVisible(close_button) === false) {
  170.             return;
  171.         }
  173.         // Hide the close button
  174.         close_button.style.display = 'none';
  176.         // Fade out the box
  177.         annytab.effects.fadeOut(box, options.fade_duration);
  179.         // Wait for the fade effect to finish
  180.         setTimeout(function ()
  181.         {
  182.             // Remove the box
  183.             container.removeChild(box);
  185.             // Check if we should remove the container
  186.             if (container.querySelector('.annytab-notifier-box') === null) {
  187.                 document.body.removeChild(container);
  188.                 container = null;
  189.             }
  190.             
  191.         }, options.fade_duration);
  193.     } // End of the close method
  195.     // Remove a container
  196.     function removeContainer()
  197.     {
  198.         // Make sure that the container exists
  199.         if (container !== null)
  200.         {
  201.             // Get all boxes in the container
  202.             var boxes = container.querySelectorAll('.annytab-notifier-box');
  204.             // Loop boxes
  205.             for (var i = 0; i < boxes.length; i++) {
  207.                 // Close the box
  208.                 close(boxes[i]);
  209.             }
  210.         }
  212.     } // End of the removeContainer method
  214.     // Public methods
  215.     return {
  217.         setOptions: function (opts) {
  219.             return updateOptions(opts);
  220.         },
  221.         show: function (type, message)
  222.         {
  223.             return create(type, message);
  224.         },
  225.         clear: function ()
  226.         {
  227.             removeContainer();
  228.         }
  229.     };
  231. })();

Styling (CSS)

The container for notifications can be set at various positions on the screen, the center-center position might look a little blurry. The close button is created entirely in CSS and icons comes from Font Awesome.

  1. /* Containers */
  2. .annytab-notifier-container {
  3.     display: block;
  4.     z-index: 200;
  5.     position: fixed;
  6.     max-width: calc(100% - 10px); /* adjust for margin */
  7.     max-height: 100%;
  8.     overflow: auto;
  9. }
  11. /* General styles */
  12. .annytab-notifier-box {
  13.     display: none;
  14.     position: relative;
  15.     margin: 5px;
  16.     width: 500px;
  17.     max-width: calc(100% - 10px); /* adjust for margin */
  18.     -webkit-box-sizing: border-box;
  19.     -moz-box-sizing: border-box;
  20.     box-sizing: border-box;
  21. }
  23. .annytab-notifier-padding {
  24.     display: block;
  25.     padding: 15px 15px 15px 65px;
  26.     text-align: left;
  27. }
  29. .annytab-notifier-icon {
  30.     display: inline-block;
  31.     position: absolute;
  32.     font-size: 28px; /* 32px is actual height */
  33.     top: calc(50% - 16px);
  34.     left: 15px;
  35.     margin: auto;
  36. }
  38. .annytab-notifier-message {
  39.     font-size: 16px;
  40.     line-height: 24px;
  41. }
  43. .annytab-notifier-progress {
  44.     display: none;
  45.     position: absolute;
  46.     left: 0;
  47.     bottom: 0;
  48.     width: 100%;
  49.     height: 4px;
  50.     background-color: #d9d9d9;
  51. }
  53. /* Box positions */
  54. .annytab-notifier-top-left {
  55.     top: 5px;
  56.     left: 5px;
  57. }
  59. .annytab-notifier-top-center {
  60.     top: 5px;
  61.     left: 50%;
  62.     -ms-transform: translateX(-50%);
  63.     transform: translateX(-50%);
  64. }
  66. .annytab-notifier-top-right {
  67.     top: 5px;
  68.     right: 5px;
  69. }
  71. .annytab-notifier-center-center {
  72.     top: 50%;
  73.     left: 50%;
  74.     -ms-transform: translate(-50%, -50%);
  75.     transform: translate(-50%, -50%);
  76. }
  78. .annytab-notifier-bottom-left {
  79.     bottom: 5px;
  80.     left: 5px;
  81. }
  83. .annytab-notifier-bottom-center {
  84.     bottom: 5px;
  85.     left: 50%;
  86.     -ms-transform: translateX(-50%);
  87.     transform: translateX(-50%);
  88. }
  90. .annytab-notifier-bottom-right {
  91.     bottom: 5px;
  92.     right: 5px;
  93. }
  95. /* Message types */
  96. .annytab-notifier-success {
  97.     background-color: #ffffff;
  98.     border: 4px solid #51A351;
  99.     color: #51A351;
  100. }
  102. .annytab-notifier-error {
  103.     background-color: #ffffff;
  104.     border: 4px solid #BD362F;
  105.     color: #BD362F;
  106. }
  108. .annytab-notifier-info {
  109.     background-color: #ffffff;
  110.     border: 4px solid #2F96B4;
  111.     color: #2F96B4;
  112. }
  114. .annytab-notifier-warning {
  115.     background-color: #ffffff;
  116.     border: 4px solid #CC7606;
  117.     color: #CC7606;
  118. }
  120. /* Close button */
  121. .annytab-notifier-close 
  122. {
  123.     position: absolute;
  124.     width: 12px;
  125.     height: 12px;
  126.     top: 2px;
  127.     right: 2px;
  128.     cursor: pointer;
  129. }
  131. .annytab-notifier-close:before, .annytab-notifier-close:after {
  132.     position: absolute;
  133.     right: 5px;
  134.     content: ' ';
  135.     height: 12px;
  136.     width: 2px;
  137.     background-color: #000000;
  138. }
  140. .annytab-notifier-close:before {
  141.     transform: rotate(45deg);
  142. }
  144. .annytab-notifier-close:after {
  145.     transform: rotate(-45deg);
  146. }

How to use this plugin

You can set options before you start to call methods in the plugin, default values will be used if you don’t set any options. Set the duration to a value less than 1 if you do not want notifications to be shown during a limited time, notifications have to be closed or cleared in that case.

  1. <!--<script src="https://polyfill.io/v3/polyfill.min.js?features=CustomEvent"></script>-->
  2. <link href="/css/annytab.notifier.css" rel="stylesheet" />
  3. <script src="/js/font-awesome/v5.3.1/all.min.js"></script>
  4. <script src="/js/annytab-shared/annytab.effects.js"></script>
  5. <script src="/js/annytab-shared/annytab.notifier.js"></script>
  6. <script>
  8.     // Set options
  9.     // Positions: top-left, top-center, top-right, center-center, bottom-left, bottom-center, bottom-right
  10.     annytab.notifier.setOptions({ duration: 10000, position: 'top-right', fade_duration: 1000 });
  12.     // Show success
  13.     annytab.notifier.show('success', 'Success, everything was perfect!');
  15.     // Show error
  16.     annytab.notifier.show('error', 'Something is wrong, it can be that or that.');
  18.     // Show information
  19.     annytab.notifier.show('info', 'I just want to inform you that it is going to rain today.');
  21.     // Show warning
  22.     annytab.notifier.show('warning', 'Warning for Internet Explorer, the worst browser that exists.');
  24. </script>
Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *