[plug-in] flavr.js (Doc)

Installation

flavr requires two essential files and another animate.css to works perfectly with the best user experience.

<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
<link rel="stylesheet" type="text/css" href="css/flavr.css" />
    
<script type="text/javascript" src="js/flavr.js"></script>

animate.css is an awesome CSS3 animation library pack created by Daniel Eden. Head over to his homepage to see more.

Getting Started

flavr is designed to be able to run even with minimal options. Here are some examples of Hello World dialog with flavr.

new $.flavr('Hello world!');
new $.flavr('Hello world!', 'Hello world example');
new $.flavr({ content: 'Hello world!' });

To launch flavr, you have to define at least one parameter. flavr uses dynamic pattern, meaning it will automatically detect the type of any given arguments. Just like these examples above.

There are two basic patterns you could use to launch a flavr dialog, the inline and the default pattern.

Inline pattern:

new $.flavr( content:string [,title:string] [,inlineCallback($container)] );

Default pattern:

new $.flavr( options:object [,inlineCallback($container)] );

The inlineCallback is a separated callback which is not overriding any conditional callback and will always be executed after the dialog has been displayed on screen. You will see more callbacks later in this documentation.

Available Options

Here are all the available options you could pass to flavr.

animated	Set to false to disable the entrance and closing CSS3 animation. Default is true.
animateEntrance	Choose the entrance animation. Default entrance animation is 'flipInX'
animateClosing	Choose the closing animation. Default closing animation is 'fadeOut'
autoclose	Whether to enable a timer that will auto close the dialog after a specific timeout The default value is false, while the default timeoutin miliseconds is 3000.
buttons	Define your own button sets to be added in the dialog.
buttonDisplay	Define your buttons will be displayed, either display it inline or stacked. The default value is 'inline'
closeEsc	Whether to let the user to close the dialog by pressing the keyboard Escape button. Default is false.
closeOverlay	Whether to let the user to close the dialog by clicking the wrapping overlay. Default value is false.
content	This will be your dialog content
dialog	Define your dialog type. There are 4 dialog types available to choose, they are alert, confirm, prompt and form dialog. Each dialog type comes with specific preset buttons and behaviour. Preset buttons are overridable. The default dialog type when it wasn't specified isalert.
form	Specify your form properties for a form dialog type only.
html	Whether to let flavr display html contents or not. When set to false, any html tags will be converted as encoded html.
icon	Add an icon to your dialog by providing the icon filename including the file extension. The default icon folder is 'images/icon/'. You could specify your own folder using the following iconPath option.
iconPath	Override the default icon folder with your own one. The default path is 'images/icon/'.
modal	Whether to set your dialog as modal or modeless. When set to false, the fullscreen overlay will be removed and the user will be able to interact to the rest elements of the page. This option is only supported on a browser that supports pointer-events property.
opacity	Optionally set a decimal value to override the overlay's opacity. The default opacity is 0.4 which is specified within the main stylesheet.
overlay	Set to false to disable the overlay, while still preventing user interactions to the rest of the page outside the dialog.
position	Control your dialog position on screen. By default there are 6 positions available, top-left, top-mid, top-right, bottom-left,bottom-mid and bottom-right.
timeout	The lifespan of an autoclosed dialog in miliseconds. The default timeout is 3000 (3 seconds).
title	Provide an optional title to your dialog.
onLoad	Set a callback to be called when the plugin has been succesfully loaded for the first time. There is no DOM element created at this stage yet.
onBuild	Set a callback to be called when the DOM elements have been created succesfully. The dialog is not yet displayed in this stage.
onShow	Set a callback that will be called each time the dialog is displayed on the screen.
onHide	Set a callback that will be called each time the dialog is about to be hidden from the screen.
onClose	Set a callback that will be called when the dialog is about to be closed (removed from the document).
onConfirm	Set a callback that will be called when the user has confirmed a confirm or prompt dialog by clicking the preset confirm button.
onSubmit	Set a callback that will be called when the user is about to submit the form in a form dialog type with preset buttons.
onCancel	Set a callback that will be called when the user has canceled confirm, prompt or form dialog by pressing the preset cancel button.

Properties

All options that are related will be populated and described below.

Animation

Animated example:

new $.flavr({ content: 'Skip animation', animated: false }); 

RUN

By default, flavr dialog is animated using the animate.css. Set this option to false to disable animation when the dialog is displayed or hidden. You could change the entrance and closing animation via animateEntrance and animateClosing options.

new $.flavr({ content: 'Entrance and closing animation', animateEntrance: 'rollIn', animateClosing: 'rollOut' });

RUN

When animated, onShow callback will be delayed and executed after the animation has finished. To animate the dialog by code use a separated animate()method.

Autoclosing Dialog

Usage example:

new $.flavr({ content: 'Autoclosing dialog in 5 seconds', buttons: false, autoclose: true, timeout: 5000 }); 

RUN

Set a timer to automatically close the dialog after a specific duration in milisecond. By default the autoclose option is set to false and the timeout value is3000 (3 seconds).

Buttons

Buttons example:

new $.flavr({ 
    content : 'Buttons example', 
    buttons : {
        submit  : { text: 'Submit Now', style: 'danger', addClass: 'submit-btn', 
                    action: function( $container, $second, $third ){
                        alert ('Submit Now');
                        return false;
                    }
        },
        reset   : function(){
            alert('Reset and close');
        }        
    },
    buttonDisplay : 'stacked'
});

RUN

flavr lets you define your own button set freely anyway you wanted. The buttons option is an object containing your buttons and their own properties. When set to false to create a dialog without any buttons added.

• text option will be the caption of your button. When this option is not specified, your button object key will be used as the caption.
• style is a class property that will be applied to your button to customize its style. All the styles are configured from the main stylesheet. There are 6 styles within the main stylesheet, they are default, primary, success, info, warning, and danger.
• addClass will let you append other necessary classes to your button.
• prepend lets you insert HTML element before the button's text, and append lets you insert HTML after the button's text. It is useful in some cases like when you want to add font icon to your button.
• action is the blockcodes that will be executed when the user has clicked your button. You will have 2 main references inside this block, while there will be other references available for some specific dialog types only. However, if this action is set to false, the button will do nothing but prevents the dialog from closing.
  • this will reference directly to the current flavr instance. Remember to always invoke flavr with new prefix to create a new instance of flavr for each dialogs.
  • The first argument ($container) will reference to the dialog container.
  • For a confirm dialog, the second ($second) argument will reference to the button itself. And the third argument is empty (not available).
  • For a prompt dialog, the second argument ($second) will be the input/textbox of your prompt dialog, and the third argument ($third) will reference to the button itself.
  • As well as for a form dialog, the second argument will reference to the form element, and the third argument is the button itself.
• The sub-options are not limited to those options above. Any other given value will be accepted and appended as html attribute for the current button. So adding id: 'submit-btn' will do just fine.
• Alternatively, if you're going to add a button and have no other things to set except the button action, you could simply assign your blockcodes directly to the button object, just like the reset button we have in the example above. In this case, the button object key will be used as the button caption.

Any button will do close the dialog everytime its action has been executed. To abort the closing, add a return false at the end of your code.

Another related option is the buttonDisplay which determines how your buttons will be arranged. Available options are 'inline' and 'stacked'. The defaultbuttonDisplay is 'inline'.

Alternative Closing

Example:

new $.flavr({ 
    content         : 'Click the overlay or press the Escape button', 
    buttons         : {
        nope        : { action: function(){ this.shake(); return false }}
    },
    closeOverlay    : true,
    closeEsc        : true
});

flavr provides you two alternative ways to close your dialog, by clicking the wrapper overlay or pressing the escape keyboard button. Both closeOverlay andcloseEsc are set to false by default. To close the dialog by code use .close(). To close all the currently active dialogs use .exit() or .closeAll()

HTML Contents

Example:

new $.flavr({ 
    title   : 'How to create hyperlink',
    content : 'link', 
    html    : false
});

flavr supports html content by default. When set to false any html tags will be converted to safe encoded string . Only title and content properties that can accept html. To retrieve or set dialog's content by code, use .content() To retrieve or set dialog's title use .title()

Dialog Types

Alert example:

new $.flavr( "'alert' is the default dialog type" );

By default, flavr dialog acts like the vanilla javascript alert popup. However, flavr also provides you the possibilities to create and mimic a confirmation dialog, prompt dialog, or even an advanced login form. For example, by assigning 'confirm' as the dialog type, you could create your own confirmation dialog with predefined buttons and behaviour. There are 4 available dialog types to choose, they are 'alert' (default), 'confirm', 'prompt' and 'form' dialog.

Confirm Dialog

Live example:

new $.flavr({
    content     : 'Press a button',
    dialog      : 'confirm',
    onConfirm   : function( $container ){
        alert('You pressed Confirm!');
        return false;
    },
    onCancel    : function( $container ){
        alert('You pressed Cancel');
    }
});

Confirm dialog comes with two preset buttons, a Confirm and a Cancel button. When the user press the Confirm button, the user defined onConfirm callback will be executed. As well as when the user press the Cancel button, the onCancel callback will be executed when specified. This behaviour is only valid for the default preset buttons. However, when the buttons are overridden you will have to call the callback manually within the button's action.

• this inside the onConfirm and onCancel will reference to the current flavr instance.
• The first parameter of the function will reference to the container of the dialog.
• Add a return false at the end of your code whenever you want to abort the closing after the callback has been executed.
• Use onConfirm() and onCancel() to set or retrive the callback function manually.

Alternatively in a simpler way, you could also write something like this:

new $.flavr().confirm('Press a button', function(){
    alert('You pressed Confirm');
    return false;
});

You have to declare an empty flavr object first, and then chain it with confirm() method. confirm() method is available to chain on an empty flavr object only. Here is the confirm() method pattern.

new $.flavr().confirm( content:string [,title:string] [,onConfirm($container)] [,onCancel($container)] );

Prompt Dialog

Live example:

new $.flavr({
    content     : 'Please enter your name',
    dialog      : 'prompt',
    prompt      : { value: 'Harry Potter', addClass: 'prompt-name' },
    onConfirm   : function( $container, $prompt ){
        alert('Howdy ' + $prompt.val() + ' !');
        return false;
    }
});

Prompt dialog configuration is pretty much the same as Confirm dialog. It also comes with two preset buttons, a Confirm and a Cancel button. When the user press the Confirm button, the user defined onConfirm callback will be executed. As well as when the user press the Cancel button, the onCancel callback will be executed when specified. This behaviour is only valid for the default preset buttons. When the buttons are overridden you will have to call the callback manually within the button's action.

• Use prompt option to setup the prompt input/textbox properties.
  • The value sub-option will set the prompt's default value.
  • addClass will let you append necessary classes.
  • Any other supplied sub-options are accepted as well, they will be appended as HTML attribute. For example, adding placeholder: 'Your name' will add a placeholder to the prompt input.
• this inside onConfirm and onCancel references to the current flavr instance.
• The first argument ($container) of the function will reference to the container of the dialog.
• The second argument ($prompt) of the function will reference to the prompt input/textbox.
• Add a return false at the end of your code whenever you want to abort the closing after the callback has been executed.
• Use onConfirm() and onCancel() to set or retrive the callback function manually.

In a simpler way, you could write something like this:

new $.flavr().prompt('Harry Potter', 'Please enter your name', 'Test title', function( $cont, $prompt ){
    alert( 'Howdy, ' + $prompt.val() );    
    return false;
});

You have to declare an empty flavr first, then chain it with prompt() method. prompt() method is available to chain on an empty flavr object only. Here is theprompt() method pattern. Pass null to the default_value to leave the prompt empty.

new $.flavr().prompt( default_value:string [,content:string] [,title:string] [,onConfirm($container, $prompt)] [,onCancel($container, $prompt)] );

Form Dialog

Live example:

var html =  
'   <div class="form-row">' +
'       <input type="text" name="username" ' +
'       placeholder="Username" />' +
'   </div>' +
'   <div class="form-row">' +
'       <input type="password" name="password" ' +
'       placeholder="Password" />' +
'   </div>' +
'   <div class="form-row">' +
'       <input type="checkbox" name="remember" ' +
'       id="check"/>' +
'       <label for="check">Remember me</label>' +
'   </div>';

new $.flavr({
    title       : 'Form',
    content     : 'Please login to continue',
    dialog      : 'form',
    form        : { content: html, addClass: 'form-html' },
    onSubmit    : function( $container, $form ){
        alert( $form.serialize() );        
        return false;
    }
});

A form dialog comes with two preset buttons, a Submit and a Cancel button. By default, when the user submit the form or press the Submit button, the onSubmitcallback will be executed. When the user press the Cancel button, the onCancel callback will be executed. This is the dafault buttons behaviour and will be lost when the buttons are overriden.

• Use form option to setup the form element properties.
  • The content sub-option will set the form's content.
  • addClass will let you append necessary classes.
  • Any other supplied sub-options are accepted as well, they will be appended as HTML attribute. For example, adding method: 'post' will add a method attribute to the form element.
• this inside onSubmit and onCancel references to the current flavr instance.
• The first argument ($container) of the function will reference to the container of the dialog.
• The second argument ($form) of the function will reference to the form element.
• Add a return false at the end of your code whenever you want to abort the closing after the callback has been executed. Inside the onSubmit callback,return false will halt the submit proccess to the server.
• Use onSubmit() and onCancel() to set or retrive the callback function manually.

Alternative syntax

var html =  
'   <div class="form-row">' +
'       <input type="text" name="username" ' +
'       placeholder="Username" />' +
'   </div>' +
'   <div class="form-row">' +
'       <input type="password" name="password" ' +
'       placeholder="Password" />' +
'   </div>' +
'   <div class="form-row">' +
'       <input type="checkbox" name="remember" ' +
'       id="check"/>' +
'       <label for="check">Remember me</label>' +
'   </div>';

new $.flavr().form( html, 'Please login to continue', 'Form', function( $cont, $form ){
    alert( $form.serialize() );
    return false;
});

Pattern

new $.flavr().form( htmlstring:string [,content:string] [,title:string] [,onSubmit($container, $form)] [,onCancel($container, $form)]);

Custom Icon

Live example:

new $.flavr({
    content     : 'You\'ve got 1 message',
    iconPath    : 'flavr/images/icons/',
    icon        : 'star.png',
    buttons     : {
        read    : { style: 'info' },
        later   : { style: 'danger' }
    }
});

With flavr it is possible to add custom icon to your dialog. Specify the icon filename including the extension. By default the icons are stored under'images/icons' directory. Use the iconPath property to override the default icon directory path. All icons are free version and credited to their designers.

Modal and Overlay

Modeless dialog example:

new $.flavr({
    content     : 'I am modeless dialog',
    modal       : false
});

flavr dialog is designed to be a modal dialog by default. However you are allowed configure this state and create your own modeless dialog, the reverse state of a modal dialog. Modeless dialog doesn't restrict user interactions to the rest element of the page. This mode is only supported in modern browser that supports CSSpointer-events property. The fullscreen overlay will be completely removed in modeless dialog.

Overlay is the fullscreen layer that separates the dialog with the rest of the page. By default the overlay has 0.4 opacity, you could specify your own opacity value via opacity option.

User specified opacity example:

new $.flavr({
    content     : 'Simply a lighter overlay',    
    opacity     : 0.3
});

When set to false, both modal and overlay will remove the fullscreen overlay. The only difference is, when the overlay is set to false, it will remove the fullscreen overlay while still preventing user interactions to the rest element of the page.

Disabled overlay example:

new $.flavr({
    content     : 'Dialog with disabled overlay',
    overlay     : false    
});

Dialog Position

Live example:

new $.flavr({
    content     : 'Me at top left',
    position    : 'top-left'    
});

new $.flavr({
    content     : 'Me at top right',
    position    : 'top-right'    
});

new $.flavr({
    content     : 'Me at bottom mid',
    position    : 'bottom-mid'    
});

The default position for any flavr dialog is on the center of your screen. However, you could customize your dialog and control its position using the positionoption. There are 6 position available to choose, they are top-left, top-mid, top-right, bottom-left, bottm-mid, bottom-right. All of these positions are fully controlled by the power of CSS. Just like you, we also hate to use javascript on things we could do with CSS.

To manually change the dialog position on the fly, use position() method.

Callbacks

Live example:

new $.flavr({
    content     : 'Callback example',
    buttons     : {
        hide    : { style: 'danger', action: function(){ this.hide(); return false }},
        close   : { style: 'info' }
    },
    onLoad      : function(){
        alert('The plugin has been loaded');
    },
    onBuild     : function(){
        alert('The DOM elements have been created');
    },
    onShow      : function(){
        alert('The dialog is displayed on screen');
    },
    onHide      : function(){
        var flavr = this;
        alert('Displaying the dialog again after 3 seconds');
        setInterval(function(){
            flavr.show();
        }, 3000);
    },
    onClose     : function(){        
        if(! confirm('Close now?')) return false;
    }
});

flavr gives you the ability to provide hooks/callbacks at a particular stage in the execution process. For example, you might want to execute some codes right after the flavr instance gets loaded, or when the dialog is about to be closed, etc. There are 5 different callbacks available at every stage, they are onLoad, onBuild,onShow, onHide, onClose.

• onLoad callback will be executed once, right after the flavr object has been loaded. There is no DOM element created at this stage yet. this is the only reference availabe inside this callback which references to the current flavr instance.
• onBuild callback will be executed once, immediately when all DOM elements have been created and appended to the document, however the dialog is not displayed on the screen at this stage. this will reference to the current flavr instance. The first argument will reference to the dialog container. If in some cases you wanted to cancel the dialog appearance, simply add a return false at the end of your code block.
• onShow will be executed each time the dialog has successfully displayed on screen. It means that when you hide the dialog using the hide() method and then show it again with show(), the callback will be executed once again.
• onHide will be executed when the dialog is about to be hidden. By returning false the dialog will abort the hiding proccess, it is useful for example when you have conditional statement in your code.
• onClose will be executed when the dialog is about to be closed. You can control the closing proccess at this stage as well. By adding return false the dialog will cancel the closing proccess, it is useful when you have conditional state in your code.

Helper Methods

All helper methods are described below.

hide()

Live example:

new $.flavr({ 
    content     : 'Click the overlay to exit', 
    buttons     : {
        hide    : function(){
            this.hide();            
            return false;                    
        }
    },
    closeOverlay : true
}); 

This method lets you hide any displayed dialog. When you hide a displayed dialog and an onHide callback is defined, it will be executed when the dialog is about to be hidden. To retrive or attach a new onHide callback to any dialog, use the onHide() method. Hiding an already hidden dialog using hide() will not trigger the callback twice.

show()

Live example:

new $.flavr({ 
    content     : 'Click the overlay to exit', 
    buttons     : {
        hide    : function(){
            var flavr = this;
            flavr.hide();                     
            setInterval(function(){
                flavr.show();
            }, 1000);
            return false;                    
        }
    },
    closeOverlay : true,
    closeEsc     : true
}); 

show() lets you redisplay any previously hidden dialog. When you redisplay a dialog and an onShow callback is defined, it will be executed right after the dialog has displayed on the screen. Accidentally calling show() on an already displayed dialog will not trigger the callback twice.

To retrive or attach a new onShow callback to a dialog, use the onShow() method.

close()

Live example:

new $.flavr({ 
    content     : 'All these buttons will close this dialog', 
    buttons     : {
        close   : { action: function(){
                        this.close();            
                    }
        },
        destroy : function(){},
        banish  : {}
    }    
}); 

close() lets you close any dialog regardless of its state, hidden or not. close() will fade out the dialog if it is displayed and then remove them from the document. When you close a dialog and an onClose callback is defined, it will be executed when the dialog is about to be closed.

If a dialog is closed this way, it's DOM element will be removed and the current flavr object will become void or null, so chaining any methods on a closed dialog object will produce an error.

To retrive or attach a new onClose callback to a dialog, use onClose() method.

closeAll()

Live example:

new $.flavr('I\'m the 1st dialog'); 
new $.flavr('Me the 2nd dialog');
new $.flavr({
    content : '3rd dialog',
    buttons : {
        closeall    : { text: 'Close All', 
                        action: function(){
                            this.closeAll();                            
                        }        
        },
        close   : {}
    }
});

closeAll() lets you close all the dialogs in the current document. Any defined onClose callback will be executed as well.

exit()

exit() is identical to the closeAll() method above.

animate()

Live example:

new $.flavr({
    content : 'Animate examples',
    buttons : {
        shake   : function(){
            this.animate('shake', function(){
                alert('Animation finished');
            });
            return false
        },
        swing   : function(){
            this.swing(function(){
                alert('Animation finished');
            });
            return false
        },
        close   : {}
    }
});

Pattern:

animate( animation:string [,callback($container)] );

animate() lets you animate your dialog custom CSS3 animation from the populer animate.css library. animate() accepts callback that will be executed after the animation has completed. The demo button below will show you the list of all available animations.

                                                            bounce                               flash                               pulse                               rubberBand                               shake                               swing                               tada                               wobble                                                                                          bounceIn                               bounceInDown                               bounceInLeft                               bounceInRight                               bounceInUp                                                                                          bounceOut                               bounceOutDown                               bounceOutLeft                               bounceOutRight                               bounceOutUp                                                                                          fadeIn                               fadeInDown                               fadeInDownBig                               fadeInLeft                               fadeInLeftBig                               fadeInRight                               fadeInRightBig                               fadeInUp                               fadeInUpBig                                                                                          fadeOut                               fadeOutDown                               fadeOutDownBig                               fadeOutLeft                               fadeOutLeftBig                               fadeOutRight                               fadeOutRightBig                               fadeOutUp                               fadeOutUpBig                                                                                          flip                               flipInX                               flipInY                               flipOutX                               flipOutY                                                                                          lightSpeedIn                               lightSpeedOut                                                                                          rotateIn                               rotateInDownLeft                               rotateInDownRight                               rotateInUpLeft                               rotateInUpRight                                                                                          rotateOut                               rotateOutDownLeft                               rotateOutDownRight                               rotateOutUpLeft                               rotateOutUpRight                                                                                          slideInDown                               slideInLeft                               slideInRight                               slideOutLeft                               slideOutRight                               slideOutUp                                                                                          hinge                               rollIn                               rollOut                                                      Demo

flavr also provided you some shortcut methods for several animations. They are bounce(), flash(), pulse(), rubberBand(), shake(), swing(), tada()and wobble()

getDefaults()

getDefaults() lets you retrieve the default flavr settings into an object.

getSettings()

getSettings() lets you retrieve the current flavr settings into an object.

width()

Live example:

new $.flavr({
    content : 'Width resize',
    buttons : {
        width   : function(){
            alert( 'Dialog\'s width is ' + this.width() + 'px' );
            return false
        },
        resize  : function(){
            this.width(500);
            return false
        }
    },
    closeOverlay : true,
    closeEsc     : true
});

Pattern:

width( [value:string] [,callback($container)] );

width() lets you set or retrieve the dialog's width in pixel. If there is no argument given, it will retrive the dialog's width. Otherwise if a value is given, it will set the dialog's width to the given pixel. This method also accepts callback and will be executed after the animation has ended.

You could alternatively assign false to the callback to disable the resizing animation. In this case, the callback is not necessary as the resizing occurs instantly.

height()

Live example:

new $.flavr({
    content : 'Height resize',
    buttons : {
        height  : function(){
            alert( 'Dialog\'s height is ' + this.height() + 'px' );
            return false
        },
        resize  : function(){
            this.height(500);
            return false
        }
    },
    closeOverlay : true,
    closeEsc     : true
});

Pattern:

height( [value:string] [,callback($container)] );

height() lets you set or retrieve the dialog's height in pixel. If there is no argument given, it will retrive the dialog's height. Otherwise when a value is given, it will set the dialog's height to the given pixel. This method also accepts callback that will be executed after the animation has ended.

You can alternatively assign false to the callback to disable the resizing animation. Then the callback will be not necessary as the resizing takes no time.

resize()

Live example:

new $.flavr({
    content : 'Resizing example',
    buttons : {
        resize  : function(){
            this.resize(500, 500);
            return false
        }
    },
    closeOverlay : true,
    closeEsc     : true
});

Pattern:

resize( width:string, height:string [,callback($container)] );

resize() lets you resize your dialog to the given width and height. Both width and height value must be given in order to use this method. When specified, the callback will be executed after the animation has finished.

fullscreen()

Live example:

new $.flavr({
    content : 'Fullscreen dialog',
    buttons : {
        fullscreen  : function(){
            this.fullscreen();
            return false
        },
        close   : {}
    },
    closeOverlay : true,
    closeEsc     : true
});

RUN

Pattern:

fullscreen( [callback($container)] );

fullscreen() lets you resize the dialog into a fullscreen size. fullscreen() accepts callback to be executed after the animation has finished. When set tofalse, the resizing transition will be disabled.

revert()

Live example:

new $.flavr({
    content : 'Reverting dialog\'s dimension',
    buttons : {
        resize      : function(){
            this.resize(500, 500);
            return false
        },
        fullscreen  : function(){
            this.fullscreen();
            return false
        },
        revert      : function(){
            this.revert();
            return false;
        }
    },
    closeOverlay : true,
    closeEsc     : true
});

Pattern:

revert( [callback($container)] );

revert() lets you revert your dialog to its original state and dimension (width and height). revert() also accepts callback to be executed after the animation has finished. When set to false, the reverting animation will be disabled.

position()

Live example:

new $.flavr({
    content : 'Controlling dialog\'s position',
    buttons : {
        topleft     : { text: 'top-left',
                        action: function(){
                            this.position('top-left');
                            return false
                        }
        },
        topright    : { text: 'top-right',
                        action: function(){
                            this.position('top-right');
                            return false
                        }
        },
        bottomleft  : { text: 'bottom-left',
                        action: function(){
                            this.position('bottom-left');
                            return false
                        }
        },
        bottomright : { text: 'bottom-right',
                        action: function(){
                            this.position('bottom-right');
                            return false
                        }
        }
    },
    closeOverlay : true,
    closeEsc     : true
});

Pattern:

position( [value:string] );

position() will let you get or set the dialog's position manually. Go to dialog position to see all available positions.

content()

Live example:

new $.flavr({
    content     : 'Change your dialog\'s content',
    buttons     : {
        content : function(){
            alert( this.content() );
            return false
        },
        change  : function(){
            this.content('This is a <b>new content</b>');
            return false
        },
        close   : { style: 'danger' }
    }
});

Pattern:

content( [value:string] [,faded:boolean] );

content() lets you retrieve or alter your dialog's content on the fly. Set faded to false to disable the fading transition.

title()

Live example:

new $.flavr({
    title       : 'Title Example',
    content     : 'Change your dialog\'s title',
    buttons     : {
        title   : function(){
            alert( this.title() );
            return false
        },
        change  : function(){
            this.title('This is the New Title');
            return false
        },
        close   : { style: 'danger' }
    }
});

Pattern:

title( [value:string] [,faded:boolean] );

title() lets you retrieve or alter your dialog's title on the fly. Set faded to false to disable the fading transition.

buttons()

Live example:

new $.flavr({    
    content     : 'Retrieve your dialog buttons',
    buttons     : {
        skip    : { style: 'warning', addClass: 'button-skip', action: false },        
        close   : { style: 'danger', action: false },
        log     : { text: 'Log buttons', 
                    action: function(){
                        console.log( this.buttons() );
                        alert('The buttons object has been printed to your console');
                        return false
                    }
        }
    },
    closeOverlay : true,
    closeEsc     : true
});

buttons() lets you retrieve your dialog buttons as a collection of jQuery object.

autoclose()

Live example:

new $.flavr({    
    content     : 'Press the timeout button',
    buttons     : {
        timeout : function(){
            alert('Closing in 5 seconds');
            this.autoclose(5000);
            return false
        },
        close   : { style: 'danger' }
    }
});

Pattern:

autoclose( [timeout:integer] [,callback($container)] );

autoclose() lets you create a timer that will close the dialog after a specific timeout. The default timeout is 3000 miliseconds.

This method also accepts callback that will be executed when the timeout has elapsed and the dialog is about to be closed. If in some cases you need to cancel the closing, add a return false in your callback blockcode.

onShow()

Live example:

new $.flavr({    
    content     : 'Press the timeout button',
    onShow      : function(){
        alert('onShow callback');
    },
    buttons     : {
        hide    : function(){
            var me = this; me.hide();
            setTimeout(function(){ me.show() }, 3000);
            return false
        },
        update  : function(){
            this.onShow(function(){
                alert('This is the new onShow callback');
            });
            alert('Callback updated');
            return false
        },
        close   : { style: 'danger' }
    }
});

Pattern:

onShow( [newcallback:function] );

onShow() lets you change or retrieve the onShow callback manually after the initialization.

onHide()

Live example:

new $.flavr({    
    content     : 'Press the timeout button',
    onHide      : function(){
        alert('onHide callback');
    },
    buttons     : {
        hide    : function(){
            var me = this; me.hide();
            setTimeout(function(){ me.show() }, 3000);
            return false
        },
        update  : function(){
            this.onHide(function(){
                alert('This is the new onHide callback');
            });
            alert('Callback updated');
            return false
        },
        close   : { style: 'danger' }
    }
});

Pattern:

onHide( [newcallback:function] );

onHide() lets you change or retrieve the onHide callback manually after the initialization.

onClose()

Live example:

new $.flavr({    
    content     : 'controlling the onClose callback',
    onClose     : function(){
        alert('This is the onClose callback. \nThe closing is canceled within this callback.');
        return false
    },
    buttons     : {
        update  : function(){
            this.onClose(function(){
                alert('This is the new onClose callback. \nThe closing is no longer canceled.');
            });
            alert('Callback updated');
            return false
        },
        close   : { style: 'danger' },
    }
});

Pattern:

onClose( [newcallback:function] );

onClose() lets you change or retrieve the onClose callback manually after the initialization.

onConfirm()

Pattern:

onConfirm( [newcallback:function] );

onConfirm() lets you change or retrieve the onConfirm callback manually after the initialization. onConfirm will be executed when the user press the preset Confirm button in a prompt and confirm dialog.

onSubmit()

Pattern:

onSubmit( [newcallback:function] );

onSubmit() lets you change or retrieve the onSubmit callback manually after the initialization. onSubmit will be executed when the user submit or press the preset Submit button in a form dialog.

onCancel()

Pattern:

onCancel( [newcallback:function] );

onCancel() lets you change or retrieve the onCancel callback manually after the initialization. onCancel will be executed when the user press the Cancel button from a prompt, confirm or a form dialog.