Jquery Toast Plugin

Jquery Toast Plugin

Hey fellas, jquery toast plugin, as the name specifies, is the jquery plugin that lets you show beautiful toast messages to the user with haste.

It provides the user with a ton (please don't go and start counting them) of options. Below are some of the features of the plugin

Basic Demos

Before I go into the detail of plugin, have a look at the following quick demos:

• Simple non sticky fade transitioned toast using some random text
  

  $.toast("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, consequuntur doloremque eveniet eius eaque dicta repudiandae illo ullam. Minima itaque sint magnam dolorum asperiores repudiandae dignissimos expedita, voluptatum vitae velit.")

  
  ...sticky fade transitioned toast using some random text
  

  $.toast({
    text : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, consequuntur doloremque eveniet eius eaque dicta repudiandae illo ullam. Minima itaque sint magnam dolorum asperiores repudiandae dignissimos expedita, voluptatum vitae velit.",
    hideAfter : false
  })

  
  ...non sticky fade transitioned toast using some HTML
  

  $.toast("Let's test some HTML stuff... <a href='#'>github</a>")

  
  ...sticky fade transitioned toast using some HTML and CSS
  

  $.toast({
    text : "<strong>Remember!</strong> You can <span style='font-weight: bold; color:red;' class='horribly-styled'>always</span> introduce your own × HTML and <span style='font-size: 18px;'>CSS</span> in the toast.",
    hideAfter : false
  })

  
  ...non sticky fade transitioned toast using an array
  

  $.toast(["Ubuntu : One of it's kind", "Sublime Text : Productivity unleashed", "HeidiSQL : Just love it", "Github : Just Lovely"])

  
  ...sticky fade transitioned toast using an array
  

  $.toast({
    text : ["Ubuntu : One of it's kind", "Sublime Text : Productivity unleashed", "HeidiSQL : Just love it", "Github : Just Lovely"],
    hideAfter : false
  })

  
  ...non sticky slide transitioned toast through
  

  $.toast({ 
    text : "Let's test some HTML stuff... <a href='#'>github</a>", 
    showHideTransition : 'slide' 
  })

  
  ...sticky slide transitioned toast through
  

  $.toast({ 
    text : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ad molestias illo illum, modi, velit, excepturi, commodi ipsum itaque deserunt voluptates reprehenderit ipsa suscipit optio rem voluptate assumenda fuga explicabo.", 
    showHideTransition : 'slide',
    hideAfter : false
  })

  
  ...non sticky slide transitioned toast using array
  

  $.toast({ 
    text : ["Ubuntu : One of it's kind", "Sublime Text : Productivity unleashed", "HeidiSQL : Just love it", "Github : Just Lovely"], 
    showHideTransition : 'slide' 
  })

  
  ...sticky slide transitioned toast using array plus different formatting
  

  $.toast({ 
    text : ["Ubuntu : One of it's <strong>kind</strong>", "Sublime Text : Productivity unleashed", "HeidiSQL : Just love it", "Github : Just Lovely"], 
    showHideTransition : 'slide',
    hideAfter : false,
    bgColor : 'blue',
    textColor : '#eee'
  })

  
  

To reset/remove any toast you can do the following:

var myToast = $.toast('Some toast that needs to be removed.');
myToast.reset(); // remove the toast "Some toast that needs to be removed"

What if I want to reset all the toasts at once? You may ask. Well in that case, you can do the following:

$.toast().reset('all');

Features

• Custom toast background color and text color
• Ability to hack the CSS to add your own thing
• Text can be provided in the form of
  • Array (It's elements will be changed to an un ordered list)
  • ..text
  • HTML
• Events support i.e. beforeHide, afterHidden, beforeShow, afterShown
• Fade and Slide show/hide transitions support (More to come)
• You can position the toast, wherever you want there is support for top-left, top-right bottom-left and bottom-right, top-center, bottom-center and mid-center ...sighs! That's a whole lot of options, isn't it? No, you say. Ok then here is the most exciting thing, you can also introduce your own positioning just by passing a simple js object containing { top: - , bottom: -, left: -, right: - }
• Ability to add sticky toast
• Optional stack length can be defined (i.e. maximum number of toasts that can be shown at once)

$.toast({
    text: "Hey there fellas, here is a simple toast. Change the options above and then see the code that generates that toast", // Text that is to be shown in the toast
    heading: 'How to use', // Optional heading to be shown on the toast
    showHideTransition: 'fade', // fade, slide or plain
    allowToastClose: true, // Boolean value true or false
    hideAfter: 3000, // false to make it sticky or number representing the miliseconds as time after which toast needs to be hidden
    stack: 5, // false if there should be only one toast at a time or a number representing the maximum number of toasts to be shown at a time
    position: 'bottom-left', // bottom-left or bottom-right or bottom-center or top-left or top-right or top-center or mid-center or an object representing the left, right, top, bottom values
    position: { left : 20, right : 20, top : 20, bottom : 20 }, // bottom-left or bottom-right or bottom-center or top-left or top-right or top-center or mid-center or an object representing the left, right, top, bottom values
    bgColor: '#444',  // Background color of the toast
    textColor: '#eee',  // Text color of the toast
    textAlign: 'left',  // Text alignment i.e. left, right or center
    beforeShow: function () {}, // will be triggered before the toast is shown
    afterShown: function () {}, // will be triggered after the toat has been shown
    beforeHide: function () {}, // will be triggered before the toast gets hidden
    afterHidden: function () {}  // will be triggered after the toast has been hidden
});