Tostie

Tostie

Tostie is a very simple way to show nice toast notifications in your website. It works great for both normal and responsive websites. Some of the features:

• 4 types of notifications: success, notice, warning and error
• Easy API through jQuery
• Fully responsive
• Toast messages stay at top of the view, so you see them even if you're scrolling
• Click on the toast message to let it disappear

Demo

Notice
Success
Warning
Error

$().tostie({type:"notice", message:"This is a notice."});

Slow and fading toast message

$().tostie({type:"notice", message:"This is a slowly appearing and fading toast message.", inOutDuration:3000, inOutType:"fade"});

API

The properties below are available when you call tostie, with their default values listed.

message: "",			// The actual message which should be shown
type: "notice",			// The type of the toast message. Can be "success", "notice", "warning" or "error"
toastDuration: 3000,		// The number of milliseconds the toast message should be shown
inOutDuration: 300,		// The number of milliseconds in which the toast message should be opened and removed
inOutType: "slide",		// How the toast message should be shown. Can be "slide" or "fade"
beforeClose: function(){},	// The function which is executed just before closing
afterClose: function(){}	// The function which is executed just after closing

Installation

Installing the addon is nothing more than including jQuery and jquery.tostie.css and jquery.tostie.js (or jquery.tostie.min.js).

Have fun with tostie! Project by Duco Winterwerp. The plugin is licensed under the MIT License.