Android Style jQuery Toaster Messages Plugin - cftoaster

File Size: 4.25 KB
Views Total: 1175
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Android Style jQuery Toaster Messages Plugin - cftoaster

cftoaster is a simple jQuery plugin for creating Android-style toaster messages centered in the page to display the important notifications to your users.

How to use it:

1. Include the latest version of jQuery javascript library in the page.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

2. Include the jQuery cftoaster plugin's javascript and CSS files in the page.

<link rel="stylesheet" title="default" type="text/css" href="jquery.cftoaster.1.0.1.css"/>
<script type="text/javascript" src="jquery.cftoaster.1.0.1.min.js"></script>

3. Call the plugin on the DOM element where the toaster message will appear.

$("#element").cftoaster({
content: "Your messages"
});

4. Available options.

$("#element").cftoaster({
content: "Your messages", // string, can be html
element: "body", // DOM element to insert the message
animationTime: 150, // time in ms for the animation, -1 to show no animation
showTime: 3000, // time in ms for the toast message to stay visible
maxWidth: 250, // maximum width of the message container in px
backgroundColor: "#1a1a1a", // hexadecimal value of the colour, requires "#" prefix
fontColor: "#eaeaea", // hexadecimal value of the colour, requires "#" prefix
bottomMargin: 75 // space to leave between the bottom of the toast message and the bottom of the browser window in px
});

This awesome jQuery plugin is developed by pyuan. For more Advanced Usages, please check the demo page or visit the official website.