Toastr - a useful message javascript library

5 Feb 17


Sometimes you need to give your users a little information from your website.  I have found Toastr to be really smooth and it looks nice too.

You can tell it what type of message it is & where to position the warning on your users screen:

  • success
  • info
  • warning
  • error
  • toast-top-right
  • toast-top-left
  • toast-top-center
  • toast-top-full-width
  • toast-bottom-right
  • toast-bottom-left
  • toast-bottom-center
  • toast-bottom-full-width

To use it you need to reference bootstrap css, jquery & the Toastr.js:

    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="/Assets/Toastr/toastr.min.js"></script>
    <script src="/Assets/Toastr/script.js"></script>
    <link href="/Assets/Toastr/toastr.min.css" rel="stylesheet" />

and then it's just a simple case of adding javascript to the page.  I have added it to button clicks on the buttons at the top of the page.  Here is an example of one of the buttons code:

 
<input type="button" id="btnMessage" value="Success" onclick="toastify('success', 'Great success!', 'Congratulations', 'toast-bottom-left', 'true');" />  

I have created a c# class (below) incase you need to call the code from within .Net code. 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;

namespace Toastr_example.App_Code
{
public class Toastr
{
/*www.darrenwelch.co.uk 20161020*/
public void ShowToast(Page page, ToastType tType, string msg, string title = "",
ToastPosition position = ToastPosition.BottomRight, bool showCloseButton = true ) { string strType = ""; string strPosition = ""; switch (tType) { case ToastType.Success: strType = "success"; break; case ToastType.Info: strType = "info"; break; case ToastType.Warning: strType = "warning"; break; case ToastType.Err: strType = "error"; break; default: break; } switch (position) { case ToastPosition.TopRight: strPosition = "toast-top-right"; break; case ToastPosition.TopLeft: strPosition = "toast-top-left"; break; case ToastPosition.TopCenter: strPosition = "toast-top-center"; break; case ToastPosition.TopStretch: strPosition = "toast-top-full-width"; break; case ToastPosition.BottomRight: strPosition = "toast-bottom-right"; break; case ToastPosition.BottomLeft: strPosition = "toast-bottom-left"; break; case ToastPosition.BottomCenter: strPosition = "toast-bottom-center"; break; case ToastPosition.BottomStretch: strPosition = "toast-bottom-full-width"; break; default: break; } string script = string.Format("toastify('{0}', '{1}', '{2}', '{3}', '{4}');"
, strType, CleanStr(msg), CleanStr(title), strPosition,
showCloseButton.ToString().ToLower()); }
private string CleanStr(string str) { return str.Replace("'", "&#39;"); } public enum ToastPosition { TopRight, TopLeft, TopCenter, TopStretch, BottomRight, BottomLeft, BottomCenter, BottomStretch } public enum ToastType { Success, Info, Warning, Err } } }


Share This!



Add a comment

Darren Welch

By

Darren Welch

  5 Feb 17



Contact me online

 Facebook

 Twitter

 Linked In

 Git Hub