Post
Ask Question

Toastr Notifications To Your Web Site

Introduction

 
In my recent MEAN stack project, I wanted to notify the end-user based on events. While researching further on this, I came across toastr.js. This library, I found to be very simple and easy to use. Importantly in today’s world of responsive sites, these notification are also responsive.
 

How to use toaster in short?

  • Add a reference to toastr.js from CDN or from the downloaded package.
  • Add a link to toastr.css and toaster-responsive.css to the HTML page.
  • In JavaScript, to generate toaster notification use below command,
toastr.success('Welcome to toaster notifications!', 'Toastr Notification').
 
This will show the following toaster notification on your Html page,
  • While displaying these notifications, the toaster library provides us various options e.g. Toastr Type as Success, Warning, Info, Error, etc. And positions can also be decided in a simplistic manner. You can refer to detailed toaster options at toastr.js.
     
  • Refer to the following section for the demonstration of toaster types and positions. 
JSFiddle based sample code
 
If you want to just play with sample implementation, JSFiddle based implementation can be seen here.
 
Detailed Code Implementation goes as below,
  1. Create HTML page, toastrsample.html, and copy-paste below code to it.
    1. <!DOCTYPE html>    
    2. <html>    
    3.     
    4. <head>    
    5.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">    
    6.     
    7.         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js">    
    8.             </script>    
    9.     
    10.             <scripttype="text/javascript" src="http://codeseven.github.com/toastr/toastr.js">    
    11.                 </script>    
    12.     
    13.                 <link rel="stylesheet" type="text/css" href="http://codeseven.github.com/toastr/toastr.css">    
    14.                     <link rel="stylesheet" type="text/css" href="http://codeseven.github.com/toastr/toastr-responsive.css">    
    15.     
    16.                         <script type="text/javascript" src="toastrsample.js">    
    17.                             </script>    
    18.     
    19.                             <link rel="stylesheet" type="text/css" href="toastrsample.css">    
    20.                                 <title>How to Use Toastr</title>    
    21. </head>    
    22.     
    23. <body>    
    24.     <h2>    
    25. How to Use Toastr Notifications</h2>    
    26.     <div class="control-group" id="toastrTypeGroup">    
    27.         <div class="controls">    
    28.             <label>    
    29.                 Toast Type</label>    
    30.             <label class="radio">    
    31.                 <input type="radio" name="toasts" value="success" checked/>Success    
    32.                 </label>    
    33.                 <label class="radio">    
    34.                     <input type="radio" name="toasts" value="info" />Info    
    35.                     </label>    
    36.                     <label class="radio">    
    37.                         <input type="radio" name="toasts" value="warning" />Warning    
    38.                         </label>    
    39.                         <label class="radio">    
    40.                             <input type="radio" name="toasts" value="error" />Error    
    41.                             </label>    
    42.                             </div>    
    43.                             </div>    
    44.                             <br/>    
    45.                             <div class="control-group" id="toastrPositionGroup">    
    46.                                 <div class="controls">    
    47.                                     <label>    
    48.                                         Position</label>    
    49.                                     <label class="radio">    
    50.                                         <input type="radio" name="positions" value="toast-top-right" checked/>Top Right    
    51.                                         </label>    
    52.                                         <label class="radio">    
    53.                                             <input type="radio" name="positions" value="toast-bottom-right" />Bottom Right    
    54.                                             </label>    
    55.                                             <label class="radio">    
    56.                                                 <input type="radio" name="positions" value="toast-bottom-left" />Bottom Left    
    57.                                                 </label>    
    58.                                                 <label class="radio">    
    59.                                                     <input type="radio" name="positions" value="toast-top-left" />Top Left    
    60.                                                     </label>    
    61.                                                     <label class="radio">    
    62.                                                         <input type="radio" name="positions" value="toast-top-full-width" />Top Full Width    
    63.                                                         </label>    
    64.                                                         <label class="radio">    
    65.                                                             <input type="radio" name="positions" value="toast-bottom-full-width" />Bottom Full Width    
    66.                                                             </label>    
    67.                                                             <label class="radio">    
    68.                                                                 <input type="radio" name="positions" value="toast-top-center" />Top Center    
    69.                                                                 </label>    
    70.                                                                 <label class="radio">    
    71.                                                                     <input type="radio" name="positions" value="toast-bottom-center" />Bottom Center    
    72.                                                                     </label>    
    73.                                                                     </div>    
    74.                                                                     </div>    
    75.                                                                       
    76.                                                                    <br/>    
    77.                                                                     <button type="button" class="btn" id="showtoast">    
    78.                                                                         Show Toastr Notification</button>    
    79. </body>    
    80.     
    81. </html>   
  2. Create JavaScript file (toastrsample.js) and add the following code,
    1. $(function()    
    2.   {    
    3.     $('#showtoast').click(function()    
    4.        {    
    5.         toastr.options =     
    6.           {    
    7.             "debug": false,    
    8.             "positionClass": $("#toastrPositionGroup input:radio:checked").val(),    
    9.             "onclick": null,    
    10.             "fadeIn": 300,    
    11.             "fadeOut": 100,    
    12.             "timeOut": 3000,    
    13.             "extendedTimeOut": 1000    
    14.         }    
    15.     
    16.         var d = Date();    
    17.         toastr[$("#toastrTypeGroup input:radio:checked").val()](d, "Current Day & Time");    
    18.     });    
    19. });   
       
  3. Create Stylesheet file (toastrsample.css) and add the following code,
     
    1. body     
    2. {    
    3.     font - family: Verdana;    
    4.     font - size: small;    
    5. }   
    After running the code and on click of button ‘Show Toastr Notification’, you should see toaster notifications appearing based on Toastr Type and Position you choose.
     
    Refer the following screenshot for the same,
     


Similar Articles