Timeout in EJ2 JavaScript Toast control

10 May 20236 minutes to read

The toast can be expired based on the timeOut property. The toast can live till the time out reaches without user interaction, a time out value is considered as a millisecond.

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

  • The extendedTimeOut property determines how long the toast should be displayed after a user hovers over it.

You can terminate the process by using the showCloseButton property for destroying the toast at any time.

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/24.2.3/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/24.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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

You can prevent auto hiding in a toast as visible like static by setting zero (0) value in the timeOut Property.

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/24.2.3/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/24.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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