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
12
votes
1 answer

How to get toastr to work in Typescript

I am converting a project over to Typescript. I am having issues with toastr. import {toastr} from "toastr"; I downloaded the typescript definition file with Nuget and included it in the project. It has this export at the end of the file: declare…
Greg Gum
  • 33,478
  • 39
  • 162
  • 233
11
votes
11 answers

Duplicate toastr error messages

I am using the Toastr 2.1 JavaScript library to display transient user input validation error messages. I set preventDuplicates option to true. It is not working -- I still see duplicate messages when users click validate button in rapid succession…
Jan Dan
  • 131
  • 1
  • 1
  • 4
11
votes
3 answers

Completely remove Opacity in Toastr.js?

Is there a way to REMOVE completely the Transparency on Toastr.js? I tried to change the various lines on the .less files .opacity(@opacity) { @opacityPercent: 100; // instead of @opacity * 100; opacity: 1; // instead of @opacity; -ms-filter: …
Johnny
  • 601
  • 6
  • 18
10
votes
4 answers

Good Notification Plugin For Jquery?

I am looking at pines notify(http://pines.sourceforge.net/pnotify/) and it looks good but it seems to have little actual documentation so I am wondering is there anything more established and worked on out there? Like I don't want to spend time…
chobo2
  • 83,322
  • 195
  • 530
  • 832
9
votes
3 answers

How can I change the position of a specific toast per use case using ngx-toastr in Angular 5

I have been reading up on this on the actual site for ngx-toastr ngx-toastr, and other posts on Stack Overflow, but cannot find a clear solution for my work case. I am trying to change the position of the toastr for specific use cases. Example; when…
onmyway
  • 1,435
  • 3
  • 29
  • 53
9
votes
1 answer

toastr doesn't appear in ui-router child states

Below is an example of my parent/child states and the index.html file that renders my angular app. No toastr messages appear in the child states, not sure why. The dependency is included as expected in each controller. config.js (function(){ 'use…
NealR
  • 10,189
  • 61
  • 159
  • 299
9
votes
2 answers

Toastr JS keep toasts visible indefinitely

I'm attempting to show a toast message using the Toastr plugin from John Papa. (http://codeseven.github.io/toastr/demo.html) I'm having trouble finding an option to have the toasts remain on screen indefinitely without manually setting the "timeOut"…
noclist
  • 1,659
  • 2
  • 25
  • 66
9
votes
1 answer

Toastr notification not appearing when called

I tried the following code but nothing's popping up when I launch the page in my browser $(function () { //ready toastr.info('For more information, see our FAQ guide located below.'); });
Oisín Foley
  • 2,317
  • 2
  • 22
  • 29
9
votes
4 answers

Cancel route using Sammy.js without affecting history

I want to intercept all route changes with Sammy to first check if there is a pending action. I have done this using the sammy.before API and I return false to cancel the route. This keeps the user on the 'page' but it still changes the hash in the…
John Papa
  • 21,880
  • 4
  • 61
  • 60
8
votes
4 answers

How to control toastr options (or set them globally) from Angular controller or module

Based upon a prior SO article on injecting toastr into your app/controller. I have setup my app.js as follows: (function () { app = angular.module("app", ['breeze.angular']).value('ngToastr', toastr); //added toaster as factory so it can be…
rlcrews
  • 3,482
  • 19
  • 66
  • 116
8
votes
1 answer

toast notification over 'overlay'

I know it's not what toastr (or toast notifs in general) are meant to be used for, but I want to use them as a modal notification. My idea is following. On toast show: toastr.options.onShown = function() { //Create an overlay on the entire…
Maxsteel
  • 1,922
  • 4
  • 30
  • 55
8
votes
1 answer

Extend single toastr creation with optional custom function onclick

I received this message on how to react when a toast is clicked, so I decide to post it here for everyone. When the user clicks on a toast I don't always want the message to disappear, but depending on the kind of message I want…
John Papa
  • 21,880
  • 4
  • 61
  • 60
7
votes
2 answers

Display toastr within a particular div

I need to display a toastr message within a particular div, class or id. By default it is body. I have figured out that I need to change the target. But I cannot seem to make it work. Say for example I want to display toastr inside this…
Ankan Kumar Giri
  • 243
  • 1
  • 3
  • 12
7
votes
3 answers

How can I redirect after toastr notification

I'm trying to redirect after toastr notification finishes displaying. I currently have ajax request as $.ajax({ headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('value') }, type:…
Eric Evans
  • 640
  • 2
  • 13
  • 31
7
votes
1 answer

How can toastr.js work in Aurelia and Typescript?

I can't seem to get these to work together. I'm using the Aurelia CLI and have done so in a similar manner for other libraries successfully(like select2, spin, moment and numeral). I can't seem to get toastr to work though. Here is what I have so…
peinearydevelopment
  • 11,042
  • 5
  • 48
  • 76
1
2
3
…
23 24