TimeOut in EJ2 JavaScript Toast

4 Sep 20266 minutes to read

The Toast expires based on the timeOut property. The toast lives until the time out is reached without any interaction; the time out value is considered in milliseconds.

  • The timeOut delay can be visually represented using the Progress Bar.

  • The extendedTimeOut property determines how long the toast should be displayed after it is hovered over.

The process can be terminated at any time by using the showCloseButton property to destroy the toast.

ej.base.enableRipple(true);

//Initialize Toast component
var toast = new ej.notifications.Toast({
  title: 'Anjolie Stokes',
  content: '<p><img src="https://ej2.syncfusion.com/vue/demos/src/toast/resource/laura.png"></p>',
  position: { X: "Right", Y: "Bottom" },
  width: 230,
  height: 250,
      buttons : [{
      model: { content: "Ignore" }
  }, {
    model: { content: "reply" }
  }]
});
//Render initialized Toast component
toast.appendTo('#elementToastTime');

document.getElementById('show_toast').onclick = function () {
  let value = parseInt(document.getElementById('toast_input_index').value)
  toast.show({timeOut: value});
};
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Toast</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Toolbar Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div class="e-float-input"><input class="e-input" id="toast_input_index" required="" value="0"><span class="e-float-line"></span><label class="e-float-text">Enter timeOut</label></div>
        <div class="row"> <button style="margin-top: 20px;" class="e-btn" id="show_toast"> Show Toast</button> </div>
        <div id="element"></div>
        <div id="elementToastTime"></div>
        <br><br>
        <div id="result"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Static toast

Auto hiding in a toast can be prevented, keeping it visible as static, by setting the timeOut property to zero (0).

ej.base.enableRipple(true);

//Initialize Toast component
var toast = new ej.notifications.Toast({
  title: 'Matt sent you a friend request',
  content: 'You have a new friend request yet to accept',
  target: document.body,
  showCloseButton: true,
  position: { X: "Right" },
  timeOut: 0,
});
//Render initialized Toast component
toast.appendTo('#element');

document.getElementById('show_toast').onclick = function () {
    toast.show();
}
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Toast</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Toolbar Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div class="row"> <button class="e-btn" id="show_toast"> Show Toast</button> </div>
        <div id="element"></div>
        <br><br>
        <div id="result"></div>
        <div id="templateToast" style="display: none;color:red"> System affected by virus !!! </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

See Also