Jquery Toast Plugin

Jquery Toast is plugin to show highly customizable notifications to the user.

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)
  • Simple 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-rightbottom-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)

sex shop sex shop sex shop sex shop sex shop seks shop spanish fly psikolog sohbet numara sohbet hatti

Source: kamranahmedse.github.io

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/jquery.toast.css">
<script type="text/javascript" src="javascripts/jquery.js"></script>
<script type="text/javascript" src="javascripts/jquery.toast.min.js"></script>

2. JAVASCRIPT

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');

3. OPTIONS

$.toast({
    text: "Don't forget to star the repository if you like it.", // Text that is to be shown in the toast
    heading: 'Note', // 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
    
    bgColor: '#444444',  // Background color of the toast
    textColor: '#eeeeee',  // 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
});