Toastr - a useful message javascript library

Posted 14 October 2018 by Darren Welch

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 } } }




Darren Welch

By

Darren Welch


  14 October 2018


Contact me online

Advertisment


Tags


Toastr.js javascript code programming

Related Content




Connect to SQl Server from command prompt

19 July 2016




Umbraco Backoffice default values

02 March 2016




Umbraco - RTE - Add blockquotes

6 Jan 17