"CFToaster"
A light-weight jQuery plugin to create a toast message as seen on the android platform. See an example here.
Required Files
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.cftoaster.min.js"></script> <link rel="stylesheet" type="text/css" href="jquery.cftoaster.css"/>
Sample Usage
$(DOM element).cftoaster( {options} );
The following would create a toast message centered in an element with the id "element" with the message "This is a toast message eh!":
$("#element").cftoaster({content: "This is a toast message eh!"});
Options
- "content" - message to display, default is "This is a toast message eh".
- "animationTime" - time for the fade in and fade out animation, default is 150 (ms)
- "showTime" - time for the message to stay visible, default is 3000 (ms)
- "maxWidth" - maximum width in pixels for the toast message, default is 250 (px)
- "backgroundColor" - background colour for the toast message, default is "#1a1a1a"
- "fontColor" - font colour for the text in the toast message, default is "#eaeaea"
- "bottomMargin" - space of the toast message from the bottom of its container element, default is 75 (px)
FAQ
How many toast messages can I assign to a DOM element?
An element can only display a single toast message at a time. If more messages are assiged to an element, it gets added to the element's queue.
How can I customize the look of the toast message?
Just modify the attached jquery.cftoaster.css file, or override any of the css classes in your own css file.
Once a toast message fades out, what happens to it?
It goes to toast message heaven and is removed forever from the DOM. :'(
What is "CF" in CFToaster?
I got inspired to create this plugin while working on cityforward.org so I named it after the project.