29

I am using a cool alert js library Project: https://github.com/CodeSeven/toastr

I wanted to fadeOut the following alter after a period of time. Looking at the toastr.js file, I do see the options are there. I just dont know how to access the property 'fadeAway' 

toastr.info('Processing...');

I tried

toastr.info('Processing...', fadeAway:1000);

How do I use the fadeAway by passing in a parameter ?

Ravi Ram
  • 24,078
  • 21
  • 82
  • 113

3 Answers3

47

With version 2.0.3 you do the following to make the toastr display longer:

toastr.success('Hello World', 'New Message', { timeOut: 9500 });
Brian Ogden
  • 18,439
  • 10
  • 97
  • 176
  • 1
    Just what I was looking for. I need a longer timeout so that I have a chance to see the notification, now that Microsoft Edge has put the download pop-up box in the upper right corner, covering my notification! – Mike Finch Apr 22 '21 at 22:34
44

Before you call toastr.info, set the option you choose. For example:

toastr.options.fadeOut = 2500;

You can see many of the options in the demo here: toastr demo

These are the defaults. You can override many of them:

options = {
  tapToDismiss: true,
  toastClass: 'toast',
  containerId: 'toast-container',
  debug: false,
  fadeIn: 300,
  fadeOut: 1000,
  extendedTimeOut: 1000,
  iconClass: 'toast-info',
  positionClass: 'toast-top-right',
  timeOut: 5000, // Set timeOut to 0 to make it sticky
  titleClass: 'toast-title',
  messageClass: 'toast-message'
}
NomanJaved
  • 1,324
  • 17
  • 32
John Papa
  • 21,880
  • 4
  • 61
  • 60
6

You can also pass any options in a parameter. But the parameter must be an object. For your example you can use this:

toastr.info('Processing...', { fadeAway: 1000 });

PS: also keep in mind that fadeAway is deprecated in the current version (2.0.3).

Marius Stănescu
  • 3,603
  • 2
  • 35
  • 49