Stack Overflow
Stack Overflow

Questions tagged [toastr]

toastr is a JavaScript library for non-blocking notifications. It uses jQuery and the goal is to create a simple core library that can be customized and extended.

toastr is a JavaScript library for non-blocking notifications. It uses jQuery and the goal is to create a simple core library that can be customized and extended.

You can see a demo here

Stack Snippet Starter Pack

HTML:

<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.2/toastr.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.js"></script>

JavaScript:

toastr.success("Hello World", "Toaster Title")
348 questions
61
votes
18 answers

ngx-toastr, Toast not showing in Angular 7

I'm currently developing a web app using Angular 7. I wanted to include ngx-toastr to send notifications to users but it isn't working as expected. When I trigger a toast nothing happens, except for a box in the size of a toast is appearing in…
Marvin W.
  • 887
  • 1
  • 6
  • 10
52
votes
3 answers

Toastr: How to prevent fade out with sticky toast on mouseover?

I've been playing with toastr and have successfully set the timeout to 0 so the toast remains sticky, however the toast disappears when I mouse out of the toast. I'd like to override this so the toast only goes away if the user clicks it - ideal…
SB2055
  • 12,272
  • 32
  • 97
  • 202
42
votes
6 answers

Setting toastr opacity?

Is there any way to change it? I tried defining the toastClass as a class with opacity set to 1, but saw no changes: .toast-style{ opacity: 1; } toastr.options.toastClass = 'toast-style';
RobVious
  • 12,685
  • 25
  • 99
  • 181
38
votes
5 answers

Changing positionclass for toastr Notification

I am trying to change positionclass for my toast on div click. positionclass:is not changed to Bottom.? what am i missing here? and how to use toastr.optionsOverride = 'positionclass:toast-bottom-full-width'; @{ ViewBag.Title =…
swapneel
  • 3,061
  • 1
  • 25
  • 32
29
votes
1 answer

Using toastr in the AngularJS way

Currently, I just call toastr.success('my message') within a controller where required. This work fine, but it feels a bit dirty to me. Is there a 'best practice' or recommended 'angularjs' way of using the toastr.js library?
link64
  • 1,944
  • 1
  • 26
  • 41
29
votes
6 answers

How do I implement Toastr JS?

I am new to JS and not sure how to make this work on my page. Below is what I have. How must I make this alert show? I added the source correctly but not sure how to render the alert. …
starbucks
  • 2,926
  • 9
  • 41
  • 53
29
votes
3 answers

Toastr JS Setting fadeAway value

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…
Ravi Ram
  • 24,078
  • 21
  • 82
  • 113
20
votes
5 answers

how to display multi line message in the toastr ?

How to display multi line error message in the toastr ?? I have formatted my error message like below "Please fix the following: \r\nFirst Name is required\r\nLast Name is required\r\nEmail Address is required\r\n" But in the toasrt it shows in…
Trilok Pathak
  • 2,931
  • 4
  • 28
  • 34
18
votes
3 answers

Make toastr alerts look like bootstrap alerts

I'd like to make toastr's popup look the same as, or very close to, Bootstrap alerts. How can I do this?
Sean Kearon
  • 10,987
  • 13
  • 77
  • 93
17
votes
1 answer

Put a line break (newline) into a toastr message in AngularJS?

I'm using this code to display toasts on an AngularJS site. I need to know how to put a line break (
) into the body. When I use the options shown in this question, toastr renders the tag on screen, rather than interpreting it as HTML. How can I…
jaycer
  • 2,941
  • 2
  • 26
  • 36
14
votes
5 answers

(Angular2) Cannot read property 'extend' of undefined for toastr

I'm trying to use toastr in angularjs 2 as a service which will be injected in my component as mentioned below. When the handleEvent function is called i'm receiving "Cannot read property 'extend' of undefined". Any suggestions and/or explanation…
Mad-D
  • 4,479
  • 18
  • 52
  • 93
14
votes
9 answers

Duplicated icons with toastr

I have several icons on top of each other in a toastr message. This is what it looks like: My code is very simple, I use toastr after an Ajax call : success : function(reponse) { $(event.target).next('i').hide(); if…
Dom
  • 2,984
  • 3
  • 34
  • 64
14
votes
3 answers

Adding toastr javascript asp.net webform

I am trying to display a toastr message (info,error etc) after submitting a form using a button and update a gridview control (which is in a update panel" in asp.net webform. Thanks
David Blay
  • 527
  • 1
  • 3
  • 14
13
votes
3 answers

Toastr undefined in angularjs

I am doing tutorial and this part is about implementing login and this should give baloons about login success angular.module("app").value("mvToastr", toastr); angular.module("app").factory("mvNotifier", function(mvToastr) { return { …
user3123165
  • 363
  • 1
  • 3
  • 10
12
votes
3 answers

Prevent close Toastr on Click

I´m trying to keep toastr open alway but it´s dissapear when I click on it, I set extendedTimeOut = 0 , however the toastr dissapear when click on it, so I need a way it never closes even when I make click on it
srd98
  • 623
  • 1
  • 6
  • 12
1
2 3
…
23 24