admin

02 April 2018

No Comments

Home JQuery

Toast Notifications Using JQuery

Toast Notifications Using JQuery

Today let us learn all about Toast notifications.  A toast notification is a notification or an alert box which are used to display metro style message on the web page. For an example, the notifications appear on any smartphone are called Toast Notification.

Let’s start with creating an HTML project called “Toast Notification”. In this project, there is a button, when we click on that message will appear on the screen. To achieve this, I have used the free plugin called “toastr.js“. This plugin depends on JQuery.  Let’s start with coding.

First Step, add a new HTML Project and named it to Toast Notification in JQuery. Now add the reference files. Here I have used CDN links. You can download all the required files from the links given below:

  1. JQuery
  2. toastr.min.js
  3. toaster.min.css

1.<!DOCTYPE html>
2.  <html>
3.  <head>
4.  <title>Toast Notifications using JQuery</title>
5.  <meta charset="utf-8" />
6.  <!-- Referenced Toastr CSS file-->
7.  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" type="text/css" />
8.  </head>
9.  <body>
10. <!-- Referenced JQuery and Toastr Script files-->
11. <script src="https:"https://code.jquery.com/jquery-3.2.1.min.js"></script>
12. <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js" type="text/javascript"></script>
13. </body>
14. </html>

Second Step, We are going to create a function called “showToastrNotification()“.

  1. function showToaster(message,title) {
  2. //message : dynamic message which we want to show on screen
  3. //title: this specify title of the message box
  4. toastr.info(message, title);
  5. }

Third Step, Let’s add a button called “Click Here”.

  1. <button onclick=“showToaster(‘Hello from gyaanshastra.’,’Welcome!!!’)”>Click Here</button>

Final HTML Code for this project is as below

    1.  <!DOCTYPE html>
    2.  <html>
    3.  <head>
    4.  <title>Toast notifications using JQuery</title>
    5.  <meta charset="utf-8" />
    6.  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" type="text/css" />
    7.  </head>
    8.  <body>
    9.  <button onclick="showToaster('Hello, from gyaanshastra.','Welcome!!!')">Click Here</button>
    10. <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    11. <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js" type="text/javascript"></script>
    12. <script>
    13. function showToaster(message,title) {
    14. toastr.info(message, title, toastr.options);
    15. }
    16. </script>
    17. </body>
    18. </html>

 An output of the above code is shown as below:
[Output Image(placed in the folder): toast-notifications-using-jquery-new.gif]
Toastr.JS has more features. You can use it with more options as described below:

OptionUsage
closeButtonWhether to show close button or not. Value can be true or false.
debugWhether to debug or not. Value can be true or false.
newestOnTopDisplay newest at first. Value can be true or false.
progressBarDisplay progress bar. Value can be true or false.
positionClassIt is used to set the position of toastr notification.
preventDuplicatesWhether to prevent duplicates messagebox. Value can be true or false.
onclickRun any function when click on messagebox.
showDurationAfter how long message will appears on screen
hideDurationAfter how long message will disappera from screen
timeOutHow long message will appears on screen.
showEasingMessage box will display with the effect
hideEasingMessage box will hide with the effect

Other References

Click here to learn more about toastr.js
Click here to work with live example.

Author: admin

Leave a Reply

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