JavaScript

Toastr Notifications To Your Web Site

In my recent MEAN stack project, I wanted to notify 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 toastr in short
  • Add a reference to toastr.js from CDN or from downloaded package.
  • Add a link to toastr.css and toastr-responsive.css to HTML page.
  • In JavaScript, to generate toastr notification use below command,
toastr.success('Welcome to toastr notifications!', 'Toastr Notification').
This will show the following toastr notification on your html page,
  • While displaying these notifications, toastr 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 detailed toastr options at toastr.js.

  • Refer the following section for demonstration of toastr 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 toastr notifications appearing based on Toastr Type and Position you choose.

    Refer the following screenshot for the same,

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs