"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.