<!--    Adding required Libraries   -->
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<!--    Add the Toast-js path   -->
<script src="/path/to/js/toast.min.js"></script>

<script>
    toast("Hello, World!");
</script>

How to use it?

Default Toast

This is a default Toast. This simply calls the toast() function and passes a string to be displayed.

toast("This is the default Toast.");

Cheezy Toast

This is Toast that won't fade away, until the user clicks on the toast. You need to pass the the attribute toast-type, which can take values - cheezy for cheezy Toast and default for the default Toast.

toast("This is a cheezy Toast. Click on the cross to close it!.", {"toast-type" : "cheezy"});

Timed Toast(for 5000ms)

This is the same default Toast, but with an added delay of 5000ms. An optional dictionary can be passed to the toast() which has a key-value pair - "delay": 5000. The delay attribute defaults to 3000 and is always in milliseconds.

toast("This is a timed Toast with 4000ms delay",{"delay": 5000});

Toast on Top

The Toast is displayed on the top of the screen, rather than the bottom. A toast-pos key needs to be passed in the optional args of the toast, with the value as top. The other possible value that the attribute toast-pos can take is bottom, which is the default value.

toast("This is a toast on the top of the window.",{"toast-pos" : "top"});

Styled Toast

You can style the toast as well, passing in your customized CSS values into the optional arguments, alongwith the delay and toast-pos attributes.

opt_args = {
    "background-color"  :   "#00F",
    "border"            :   "5px dashed #F00",
    "color"             :   "#0F0",
    "font-family"       :   "monospace",
    "font-size"         :   "30px"
};
toast("This is a styled Toast.", opt_args);

Set Default Toast

set_default() is a function that is used to set the default style of the toast. Once this is set, all the toast() calls will use the parameters passed to set_default() as a base. So, once you test this, the default Toast will seem to be different, and a refresh is required to go back to the earlier state.

default_vals = {
    "background-color"  :   "#00F",
    "border"            :   "5px dashed #F00",
    "color"             :   "#0F0",
    "font-family"       :   "Helvitica",
    "font-size"         :   "30px",
    "toast-pos"         :   "top"
};
set_default(default_vals);
toast("This is the new default Toast.");