Freeow!
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.2
Date released: 2012-05-16
License: MIT
Download: Zip File
Repository: GitHub
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. | [] |
| prepend | bool |
Add the new message as the first item in the container. Set to false to append the item instead. |
true |
| 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. |
Nice, is it possible to make the notifications appear from different locations? (i.e. bottom right).
Sure can! That’s all determined by the CSS. I should add some more example styles so that’s a little more clear.
Javascript example code wrong/typo!
option “classess:”
Whoops! Thanks!
Nice work. One thing I feel irritating is the close button. It will look better if there is no close icon on mouse over or use only close icon as the popup is closed by clicking anywhere in the popup area. Or may be you have already specified some configuration for this that I missed to read.
Not working (css) in IE!
Some of the example styles use CSS3 features, so it won’t look the same in IE. You can always make your own styles for it to get it to look the way you like.
How to use function options???
Pass an object containing the options from the table as the third parameter. Look for the JavaScript example with the comment // With options
know how to use options, but the function options…? no examples…?
For example, if you want to supply your own onClick, you need to make the value a function that expects an event argument: you can do something like this:
{
onClick: function (event) {
$(this).data("freeow").hide();
}
}
Hi, great work. I’ve applied the onclick method to let the user click on the element to confirm an action shown in the window, but I’d still like to know if they clicked on the X instead as a way of cancelling the request. Bit lost in if there’s a way to determine if the Close button was clicked on rather than the entire element
hello,
is it possible to do this kind of message appear on the screen of all members connected to my wordpress blog in real-time?
thank you for your nice job !
regards
Is there a method to hiding the dialog? I want to create an event based notification, and then hide the note upon another event.
Very nice but doesn’t work on iframe :(
If you move the mouse over the element, the auto-hide disable itself and won’t auto-enable on mouse out.
I just found-out that Freeow! doesn’t work in an IFrame.
I have a popup that uses jquery.fancybox-1.3.2 and when I tried to use Freeow!, although it doesn’t generate an error, nothing happens.
I really think the simplicity and small size of Freeow! is great and will use it in non-IFrame areas.
Thanks
How can I control freeow object after shown. For example hide by command after ajax request.
If you can get a reference to the message you created, you can always call the hide method manually on the underlying Freeow instance like this:
$(“…selector goes here…”).data(“freeow”).hide();
(“…selector goes here…”).data(“freeow”).hide(); is always null… i use (“…selector goes here…”).empty() and works very well
Hi,
I was able to make this lib backwards compatible, so it works with jQuery 1.2.6, by making only this one-liner change:
//this.element.hover(this.options.onHover);
this.element.hover(this.options.onHover, this.options.onHover);
Hope that helps someone ; )
Thanks!
If you open several and then close one, all that have been opened before won’t close automatically.
Chrome 13
very nice
Nice work. I think it would be intersting to have an onHide, which will be fired when autoHide is on and user has not clicked on the message.