Simple JavaScript Notifications with toastr | John Papa

John Papa

Evangelist on the loose

Simple JavaScript Notifications with toastr

...

My friend Hans Fjällemark and I have been collaborating on some JavaScript libraries lately and we decided it was time to release toastr, the first of them, on github. Our collaborative organization is under https://github.com/CodeSeven 

toastr is a simple JavaScript toast notification library that is small, easy to use, and extendable. It allows you to create simple toasts with HTML5 and JavaScript like this:

image

Simply include the files in your HTML page and write a simple line of code like this:

toastr.success('Are you the six fingered man?', 'Inigo Montoya');

Hans is a great developer / designer and has recently helped me created some nice responsive designs in some demos and Pluralsight courses. You can see the layout he helped design and create in my latest course, JsRender Fundamentals on Pluralsight now.

jsrender ps

The API

There are 4 methods to learn. info, warning, success and error. The each have a message and an optional title.

// Display a info toast, with no title
toastr.info('Are you the six fingered man?')

// Display a warning toast, with no title
toastr.warning('My name is Inigo Montoya. You Killed my father, prepare to die!')

// Display a success toast, with a title
toastr.success('Have fun storming the castle!', 'Miracle Max Says')

// Display an error toast, with a title
toastr.error('I do not think that word means what you think it means.', 'Inconceivable!')

After having it in alpha for a few weeks and accepting feedback on it, we decided today to take it to beta as the API has stabilized. 

toastr is Responsive

Just include the viewport meta tag and the toastr-responsive.css, and toastr will adjust to different device sizes. See toastr and its responsive web design here on responsinator.com 

imageimage

Some important links:

  1. see toastr in action at toastr’s demo page here
  2. grab toastr from github at https://github.com/CodeSeven/toastr

What Else Can toastr Do?

Check out the demo for these and other examples of toastr in action.

  1. Override the css classes to change the appearance
  2. Set the fadeOut, fadeIn, and timeOut settings
  3. Set timeOut to 0 to make the toast sticky
  4. Position the toast in the top left, top right, bottom right, or bottom left
  5. Set the message to HTML content  and/or wire event handlers up to that content.
  6. For debugging, set the debug info to true to show all of the options and setting in the browser’s console window

Unit Tests

Feel free to check out toastr’s unit tests, which you can run online here. We decided to go simple and use QUnit, which does the job quite nicely.

NuGet

I published a package on NuGet for toastr that you can find here. Be sure to allow searching for pre-release packages (NuGet disables that by default). We do not foresee any changes to the API so this beta should be pretty solid. If we receive no major issues, we’ll go RC very soon.

tags: github jsrender open source pluralsight toastr
  • http://blog.johnwest.com john west

    Pretty cool! So is this html5 only? Does it degrade for IE7/IE8?

  • http://blog.mecum.biz Ilija

    Hi Jon, thank you! This stuff is awsome – and useful!

  • john

    Jon – I’ve tested it in the major browsers and IE7 and IE8. It uses some CSS and degrades in those browsers, as expected (ex: no border radius)

  • http://www.rowanbeach.com Steve W

    This looks great – nice and simple and it fits really well with the bootstrap UI, thanks, I’ll definitely be using this. The Princess Bride quotes in the demo are fun too :)

  • http://johnwest.com john west

    Two comments.
    1) Great job! I already added it to a production app for a large life settlement company. The “it just works” factor is huge.
    2) You might want to reconsider having any examples that have form fields in them. At least, that is, unless you provide support for keeping the toast alive 1) when the mouse is over it, or 2) when any fields within it have focus or have been changed. I’m guessing this isn’t the intent, so, personally, I wouldn’t try to add support for this, and would instead just delete the example.
    Keep this library simple and focused! It’s great at what it does, and doesn’t need to do too much more.

  • john

    John West – Thanks. I had a few requests to make it stick around when the mouse was hovering over it, and then fade away on mouse out. Similar to outlook toasts. I added that feature today on github. On the HTML elements … I agree its not something I want to add more support for. It happens to work as is, btut you really need to account for it. For example, if I was to add content to the toast that required action, I would set timeout to 0 so it sticks around indefinately, and wire up my own handlers for the elements. I dont want to remove the scenario because if people want to do it, i am ok with it. and its no API change for me (just a scenario deletion). But I agree with you that its not what I’d use toastr for. Its not a modal dialog. its toast :) And yep, we’ll keep it simple and core.

  • Mark

    Just started using this library. Really nice!
    We are getting a javascript error once we minify it with AjaxMin. Something about “object expected”. The error is at the start of this libaries code.
    Any ideas. Could it be the closure stuff you are doing? I’m no expert.

  • john

    Mark – I added a leading semi colon to the library and ran JSMin on it and it works minified. I’ll upload the fix in a day or so once i test it a bit more. Thanks for the heads up!

  • john

    Mark – Try JSmin

  • Mark

    I’m using Cassette for Javascript bundling and minification, and it uses AjaxMin. Can’t change it right now.
    Thanks for the quick reply.
    PS. I attended two of your sessions in Vegas. Great stuff all around.
    Thanks for this useful little library.

  • john

    Mark – Did you try putting the leading semi colon? Feel free to contact me through my contact page and I can help you better.

  • Mark

    We fixed it by adding a “trailing” semicolon. It now works when minified by AjaxMin.
    Thanks for your help on this.

  • john

    Mark – good to hear. Glad it worked out.

  • Sandy

    Is there a way to control the position of the popup to be anywhere on the screen? Currently you can only position it in the top left, top right, bottom left and bottom right. Thanks.

  • john

    Sandy – you could absolutely change the position to a custom one. First, you’d need to create a CSS class with your positioning. I posted a sample over at this link http://johnpapa.net/centering-toastr-with-css

  • Pingback: Links of the week | Jan @ Development

  • Pingback: Toastr.js and SharePoint « Share… What?

  • Jeff

    John, I’m not sure not which part of the demo I like best — the actual plugin or the random quotes from “The Princess Bride”. I’ll definitely be using this in my future projects.

    Also, thanks for all your teachings at Pluralsight…you’re an excellent instructor!

    “Have fun storming the castle” :)

  • Woz

    Hi John is there a way that you can have it appear once the window has loaded instead of on click?

    • John

      Woz,

      Yes, you can run toastr on any event. Call toastr from the event handler of your choice.

      window.onload = function() {
        toastr.info('Are you the 6 fingered man?')
      };
      
  • Sami CHNITER

    Hi John,

    Congratulations ! Great Toast :)
    How i can appear it from server side (C#)?

    • Bill Ross at Pax EDI

      Did you ever get this figured out?

  • Subu

    How do we disable this toastr notifications in production version . we want to use this for debugging purpose only.

    • Dani Barca Casafont

      You’ll need some kind of flag that disables notifications in production. It’s just an “if” when you activate the logger.

  • JJJ

    Awesome plug in, it so small and customizable, thanks a million!

  • http://punditor.com/ Punditor

    Hi John, thank you a lot for the great notifications plugin. I’m planning to use it on one of the website I have developed (punditor.com) pretty soon. Because it’s so easy to install and use. Kudos. Also thanks for the great knockout and MVC trainings on pluralsight very helpful.

  • Bhaggya

    Tip: If a toastr keeps sticking, the problem might be your jQuery version.

  • Kidar Garg

    can we use image in the notifications?

  • http://flickrock.com/mikelpierre Emepe

    Great plugin! Thanks you.

  • Jagmohan Kasana

    thanks you very much for the same .

    i have one question

    How i can appear it from server side (C#)?

  • SGSharePoint

    Hi John,

    Could you please take a look at below link and let us know your thoughts on the same?
    http://stackoverflow.com/questions/25804391/toastr-js-with-sharepoint

  • Md. Shohel Rana

    Will you generate any angular module for toaster?

  • vm dn

    Great plugin! . I have a question If user action to generate toastr message is faster than timeout, screen is being cluttered with messages. Is there a way to prevent duplicate messages? Tried

    setting ‘preventduplicates’ option to true, but not working.

%d bloggers like this: