Freeow!

January 6, 2011

Used by hoopies and froods alike, Freeow! is a plugin for making Growl-like alerts or message boxes on your website. You can customize the look and animation of Freeow! each time a message box appears, and you can alter other options such as whether or not to have the message box hide itself automatically.

Current version: 1.0.1
Date released: 2011-01-22
License: MIT
Minified filesize: 2211 bytes
Stand-alone demo: click here
Download: freeow-1.0.1.zip

Latest Update

I made a new sample stylesheet to demonstrate showing the messages in different locations. There’s no change to the plugin itself, so no need to re-download unless you want to take a look at how the new styles work.

Since the new stylesheet defines everything based on the .freeow class instead of the #freeow ID, you’ll need to update your code to get the new sample stylesheet to work if you drop in the new stylesheet.

Working Examples

Click the button to see a simple Freeow! example.

Make a custom Freeow! message

Freeow! Demo

Getting Started

Markup

Not much to it. Just add a container element to append the Freeow! elements to. I recommend making an empty div with an id directly off of body.

If you’re planning on using the sample stylesheet, you’ll also want to apply the class .freeow to this element and either .freeow-top-right or .freeow-bottom-right.

<body>
   ...
    <div id="freeow" class="freeow freeow-top-right"></div>
</body>

JavaScript

Now, jQuery reference the element from the last step and call .freeow(), passing a title, message, and optional object of options.

// Simple
$("#freeow").freeow("My Title", "Here's a message");

// With options
$("#freeow").freeow("Another Title", "One more message", {
    classes: ["gray", "error"],
    autoHide: false
});

Customizing Freeow!

When you call the .freeow() method, you can pass it an options object as the optional third argument. Use this to customize the behavior of one specific alert. You can also set the defaults modifying the object jQuery.fn.freeow.defaults.

Options

Property Type Description Default
autoHide bool If true (the default), the message box will dismiss after autoHideDelay unless the user hovers over the message. true
autoHideDelay int Time in milliseconds the message box will display before auto hidding. 3000
classes array Array of CSS class names to apply to the message box. []
startStyle object or null Object of styles (for .css() or .animate()) to set the style for the message box before it is shown. If null, hideStyle is used. null
showStyle object Object of styles (for .css() or .animate()) to set the style for the message when it is visible. {opacity: 1.0}
showDuration int Time in milliseconds to animate from startStyle to showStyle. 250
hideStyle object Object of styles (for .css() or .animate()) to set the style for the message when it is hidden. {opacity: 0.0}
hideDuration int Time in milliseconds to animate from showStyle to hideStyle. 500

Function Options

Property Arguments Returns Description
onClick event Event handler bound to the click event of the message box. The default onClick function calls the Freeow instance's hide() method.
onHover event Event handler bound to the hover event of the message box. The default onHover function calls disables auto hiding.
template title, message DOM element Function used to construct the message box. The function should accept two string arguments: the title and message. It should return a DOM element.
Share and Enjoy:
  • Twitter
  • Facebook
  • Reddit