docs/index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Fallr.js - Fancy, simple, yet elegant modal box jQuery plugin</title>	
    <meta name="description" content="fallr" />	
    <link href="https://fonts.googleapis.com/css?family=Lilita+One|Space+Mono" rel="stylesheet"> 
    <link rel="stylesheet" type="text/css" media="screen,projection" href="960gs.css" />
	<link rel="stylesheet" type="text/css" media="screen,projection" href="style.css" />
	<link rel="stylesheet" type="text/css" media="screen,projection" href="https://rawgit.com/faisalman/fallr-js/master/src/css/jquery-fallr-2.0.1.css" />
	<link rel="stylesheet" type="text/css" media="screen,projection" href="github.css" />
	<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src="jquery.easing.1.3.js"></script>
	<script type="text/javascript" src="highlight.pack.js"></script>
	<script type="text/javascript" src="https://rawgit.com/faisalman/fallr-js/master/src/js/jquery-fallr-2.0.1.js"></script>
	<script type="text/javascript">
	     //<![CDATA[

	    $(document).ready(function(){
	        
	        var methods = {	        
	            alertlike : function(){
	                $.fallr.show({
	                    content : '<p>Howdy.</p>'
	                });
	            },
	            confirmlike : function(){
	                var clicked = function(){
	                    alert('congrats, you\'ve deleted internet');
	                    $.fallr.hide();
	                };
	                $.fallr.show({
	                    buttons : {
	                        button1 : {text: 'Yes', danger:true, onclick: clicked},
	                        button2 : {text: 'Cancel'}
	                    },
	                    content : '<p>Are you sure you want to delete internet?</p>',
	                    icon    : 'error'
	                });
	            },
	            promptlike : function(){
	                var clicked = function(){
	                    var yourname = $(this).children('form').children('#yourname').val();
	                    alert('Hello, ' + yourname);
	                    $.fallr.hide();
	                };
	                $.fallr.show({
	                    buttons : {
	                        button1 : {text: 'Submit', onclick: clicked},
	                        button2 : {text: 'Cancel'}
	                    },
	                    content : '<p>Give me your name</p><form><input type="text" id="yourname" /'+'></form>',
	                    icon    : 'magnifier'
	                });
	            },
	            multiplechoices : function(){
	                var clicked = function(n){
                        alert(n);
	                };
	                $.fallr.show({
	                    buttons : {
	                        button1 : {text: 'Yes', onclick: function(){clicked(1)}},
	                        button2 : {text: 'Yes to all', onclick: function(){clicked(2)}},
	                        button3 : {text: 'No', onclick: function(){clicked(3)}},
	                        button4 : {text: 'Whatever', danger: true}
	                    },
	                    content : '<p>Pick one</p>',
	                    icon    : 'trash'
	                });
	            },
	            below : function(){
	                $.fallr.show({
	                    content : '<p>You\'ve got a message</p>',
	                    position: 'bottom',
	                    icon: 'chat'
	                });
	            },
	            middle : function(){
	                $.fallr.show({
	                    content : '<p>Hello there</p>',
	                    position: 'center'
	                });
	            },
	            close : function(){
	                $.fallr.show({
	                    closeKey : true,
                        closeOverlay : true,
	                    content : '<p>Click on overlay or press ESC to close this message</p>',
	                    icon: 'info'
	                });
	            },
	            easing : function(){
	                $.fallr.show({
	                    easingDuration    : 1000,
                        easingIn    : 'easeOutBounce',
                        easingOut   : 'easeInElastic',
                        icon        : 'window',
                        position    : 'center',
	                    content     : '<h4>Animation please</h4><p>Oh pretty. Everyone loves animation.</p>'
	                });
	            },
	            forms : function(){
	                var login = function(){
	                    var user = $(this).children('form').children('input[type="text"]').val();
	                    var pass = $(this).children('form').children('input[type="password"]').val();
	                    if(user.length < 1 || pass.length < 1){
	                        alert('Invalid!\nPlease fill all required forms');
	                    } else {
	                        alert('username: '+user+'\npassword: '+pass);
	                        $.fallr.hide();
	                    }
	                }
	                
	                $.fallr.show({
	                    icon        : 'secure',
	                    width       : '320px',
	                    content     : '<h4>Sign in</h4>'
	                                + '<form>'
                                    +     '<input placeholder="username" type="text"/'+'>'
                                    +     '<input placeholder="password" type="password"/'+'>'
                                    + '</form>',
                        buttons : {
	                        button1 : {text: 'Submit', onclick: login},
	                        button4 : {text: 'Cancel'}
	                    }
	                });
	            },
	            callback : function(){
	                var hide2 = function(){
	                    $.fallr.hide(function(){
	                        alert('callback after 2nd hide');
	                    });
	                };
	                
	                var hide1 = function(n){
	                    $.fallr.hide(function(){
	                        alert('Hi, this is a callback after hide');
	                        $.fallr.show({
	                            content     : '<p>You choose: ' + n + '</p>',
	                            position    : 'bottom',
	                            buttons     : {
	                                            button1 : {text: 'OK', onclick: hide2}
	                            }              
	                        }, function(){
	                            alert('callback after 2nd show');
	                        });
	                    });
	                };
	                	                
	                $.fallr.show({
	                    icon        : 'help',
	                    content     : '<p>Arsenal or Liverpool?</p>',
                        buttons     : {
	                                    button1 : {text: 'Arsenal', onclick: function(){hide1('Arsenal');}},
	                                    button2 : {text: 'Liverpool', onclick: function(){hide1('Liverpool');}}
	                    }
	                }, function(){
	                    alert('Hi, this is a callback after show');
	                });
	            },
	            size : function(){
	                $.fallr.show({
	                    maxWidth: '600px',
	                    height  : '400px',
                        width   : '600px',
	                    content : '<h4>Lorem Ipsum</h4><p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>',
	                    icon    : 'config'
	                });
	            },
	            autoresize : function(){
	                var smaller = function(){
	                    $.fallr.resize({width: '300px', height: '300px'});
	                };
	                var bigger = function(){
	                    $.fallr.resize({width: '500px', height: '500px'});
	                };
	                $.fallr.show({
	                    content : '<h4>Resize method</h4><p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."</p>',
	                    buttons : {
	                        button1 : {text: 'Smaller', onclick: smaller},
	                        button2 : {text: 'Bigger', onclick: bigger},
	                        button3 : {text: 'Cancel'}
	                    },
	                    width: '300px',
                        height: '300px',
                        position: 'center',
                        icon: 'left'
	                }, function(){
	                    // on show callback
	                    $.fallr.resize({width: '400px', height: '400px'});
	                });
	            },
	            fullsize : function(){
	                var gap     = 20;
	                var boxH    = $(window).height() - gap;     // bottom gap
	                var boxW    = $(window).width() - gap * 2;  // left + right gap
	                $.fallr.show({
	                    content : '<p>Fullscreen</p>',
	                    width   : boxW,
	                    height  : boxH
	                });
	            },
	            autoclose : function(){
	                $.fallr.show({
	                    buttons     : {},
	                    content     : '<h4>Autoclose</h4><p>This will be self closing after 5 seconds</p><p>No buttons haz teh present haha LOL so just wait plz</p>',
	                    autoclose   : 5000,
	                    icon        : 'clock'
	                });
	            },
	            nooverlay : function(){
	                $.fallr.show({
	                    content     : '<p>Yay, no overlay!</p>',
	                    icon        : 'quote',
	                    useOverlay  : false
	                });
	            },
	            effect : function(){
	                var blinkIt = function(){
                        $.fallr.blink();
                    };
                    var shakeIt = function(){
                        $.fallr.shake();
                    };
                    $.fallr.show({
                        content     : '<h4>Special Effects</h4>',
                        position    : 'center',
                        icon        : 'star',
                        buttons     : {
                            button1 : {text: 'Blink', onclick: blinkIt},
                            button2 : {text: 'Shake', onclick: shakeIt},
                            button3 : {text: 'Cancel'}    
                        }
                    });
	            },
	            redirect : function(){
	                var redirect = function(){
                        window.location.href = "http://www.google.com";
                    };

                    $.fallr({
                        buttons : {
                            button1 : { text: 'confirm', onclick : redirect },
                            button2 : { text: 'cancel' }
                        },
                        content: '<p>please confirm to get redirected</p>'
                    });
	            },
	            iframe : function(){
	                $.fallr.show({
                        content     : '<p>This is a video</p><iframe width="560" height="315" src="https://www.youtube.com/embed/-ubMdTHfxko" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></iframe>',
                        width       : 560 + 100, // 100 = padding width
                        icon        : 'chat',
                        buttons     : {
                            button1 : {text: 'Close'}    
                        }
                    });	            
	            },
	            bound : function(){
	                $.fallr.show({
                        content     : '<p>Set the boundary to any element. To this box for example</p>',
                        icon        : 'pin',
                        bound       : '#selector',
                        useOverlay  : false
                    });	
	            }
	        };
            $('a[href^="#fallr-"]').click(function(){
                var id = $(this).attr('href').substring(7);
                methods[id].apply(this,[this]);
                return false;
            });
            $.fallr.show();	
	    });
	    
        hljs.tabReplace = '    ';
        hljs.initHighlightingOnLoad();        

	    //]]>
    </script>
    <!-- Place this tag in your head or just before your close body tag. -->
    <script async defer src="https://buttons.github.io/buttons.js"></script>
</head>
<body>
    
    <div id="page" class="container_12">
        <div class="grid_12">
            <div id="header">
                <h1>Fallr.js</h1>
                <h3>Fancy, simple, yet elegant modal box jQuery plugin</h3>
                <h3>
                    <a class="github-button" href="https://github.com/faisalman/fallr-js" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star faisalman/fallr-js on GitHub">Star</a>
                    <a class="github-button" href="https://github.com/faisalman/fallr-js/fork" data-icon="octicon-repo-forked" data-size="large" data-show-count="true" aria-label="Fork faisalman/fallr-js on GitHub">Fork</a>
                    <a class="github-button" href="https://github.com/faisalman/fallr-js/archive/master.zip" data-icon="octicon-cloud-download" data-size="large" aria-label="Download faisalman/fallr-js on GitHub">Download</a>
                </h3>
            </div>
            <div class="clear"></div>
            <div id="slider"></div>
            <div class="clear"></div>
            <div id="features">
                <h3>Examples</h3>
                <div class="grid_6 alpha">                
                    <h4># Alert-like</h4>                    
                    <pre><code class="javascript">
$.fallr.show({
    content : '&lt;p>Howdy.&lt;/p>'
});
                    </code></pre>
                    <p><a href="#fallr-alertlike" class="button">demo</a></p>
                    
                    <h4># Prompt-like</h4>                    
                    <pre><code class="javascript">
var clicked = function(){
    var yourname = $(this).children('form').children('#yourname').val();
    alert('Hello, ' + yourname);
    $.fallr.hide();
};

$.fallr.show({
    buttons : {
        button1 : {text: 'Submit', onclick: clicked},
        button2 : {text: 'Cancel'}
    },
    content : '&lt;p>Give me your name&lt;/p>&lt;form>&lt;input type="text" id="yourname" /'+'>&lt;/form>',
    icon    : 'magnifier'
});
                    </code></pre>
                    <p><a href="#fallr-promptlike" class="button">demo</a></p>
                    
                    <h4># Coming from below</h4>                    
                    <pre><code class="javascript">
$.fallr.show({
    content : '&lt;p>You\'ve got a message&lt;/p>',
    position: 'bottom',
    icon: 'chat'
});
                    </code></pre>
                    <p><a href="#fallr-below" class="button">demo</a></p>

                    <h4># Centered</h4>                    
                    <pre><code class="javascript">
$.fallr.show({
    content : '&lt;p>Hello there&lt;/p>',
    position: 'center'
});
                    </code></pre>
                    <p><a href="#fallr-middle" class="button">demo</a></p>
                    
                    <h4># Forms</h4>                    
                    <pre><code class="javascript">
var login = function(){
    var user = $(this).children('form').children('input[type="text"]').val();
    var pass = $(this).children('form').children('input[type="password"]').val();
    if(user.length &lt; 1 || pass.length &lt; 1){
        alert('Invalid!\nPlease fill all required forms');
    } else {
        alert('username: '+user+'\npassword: '+pass);
        $.fallr.hide();
    }
}

$.fallr.show({
    icon        : 'secure',
    width       : '320px',
    content     : '&lt;h4>Sign in&lt;/h4>'
                + '&lt;form>'
                +     '&lt;input placeholder="username" type="text"/'+'>'
                +     '&lt;input placeholder="password" type="password"/'+'>'
                + '&lt;/form>',
    buttons : {
        button1 : {text: 'Submit', onclick: login},
        button4 : {text: 'Cancel'}
    },
});                    
                    </code></pre>
                    <p><a href="#fallr-forms" class="button">demo</a></p>
                    
                    <h4># Close with clicking overlay / pressing ESC key</h4>
                    <pre><code class="javascript">
$.fallr.show({
    closeKey        : true,
    closeOverlay    : true,
    content         : '&lt;p>Click on overlay or press ESC to close this message&lt;/p>',
    icon            : 'info'
});  
                    </code></pre>
                    <p><a href="#fallr-close" class="button">demo</a></p>
                    
                    <h4># Fullscreen size</h4>
                    <pre><code class="javascript">
var gap     = 20;
var boxH    = $(window).height() - gap;     // bottom gap
var boxW    = $(window).width() - gap * 2;  // left + right gap

$.fallr.show({
    content : '&lt;p>Fullscreen&lt;/p>',
    width   : boxW,
    height  : boxH
}); 
                    </code></pre>
                    <p><a href="#fallr-fullsize" class="button">demo</a></p>
                    
                    <h4># Unobtrusive Without Overlay</h4>
                    <pre><code class="javascript">$.fallr.show({
    content     : '&lt;p>Yay, no overlay!&lt;/p>',
    icon        : 'quote',
    useOverlay  : false
});</code></pre>
                    <p><a href="#fallr-nooverlay" class="button">demo</a></p>

                    <h4># Embed iframe</h4>
                    <pre><code class="javascript">$.fallr.show({
    content     : '&lt;p>This is a video&lt;/p>'
                  + '&lt;iframe width="560" height="315" src="http://www.youtube.com/embed/-ubMdTHfxko" frameborder="0" allow="autoplay; encrypted-media>&lt;/iframe>',
    width       : 560 + 100, // 100 = padding width
    icon        : 'chat',
    buttons     : {
        button1 : {text: 'Close'}    
    }
});</code></pre>
                    <p><a href="#fallr-iframe" class="button">demo</a></p>
                    
                    <h4># Non-window boundary</h4>
                    <pre id="selector"><code class="javascript">$.fallr.show({
    content     : '&lt;p>Set the boundary to any element. To this box for example&lt;/p>',
    icon        : 'pin',
    bound       : '#selector',
    useOverlay  : false
});	</code></pre>
                    <p><a href="#fallr-bound" class="button">demo</a></p>
                                     
                </div>
                <div class="grid_6 omega">
                
                    <h4># Confirm-like</h4>
                    <pre><code class="javascript">
var clicked = function(){
    alert('congrats, you\'ve deleted internet');
    $.fallr.hide();
};

$.fallr.show({
    buttons : {
        button1 : {text: 'Yes', danger: true, onclick: clicked},
        button2 : {text: 'Cancel'}
    },
    content : '&lt;p>Are you sure you want to delete internet?&lt;/p>',
    icon    : 'error'
});
                    </code></pre>
                    <p><a href="#fallr-confirmlike" class="button">demo</a></p>
                    
                    <h4># Multiple choices</h4>
                    <pre><code class="javascript">
var clicked = function(n){
    alert(n);
};
$.fallr.show({
    buttons : {
        button1 : {text: 'Yes', onclick: function(){clicked(1)}},
        button2 : {text: 'Yes to all', onclick: function(){clicked(2)}},
        button3 : {text: 'No', onclick: function(){clicked(3)}},
        button4 : {text: 'Whatever', danger: true}
    },
    content : '&lt;p>Pick one&lt;/p>',
    icon    : 'trash'
});
                    </code></pre>
                    <p><a href="#fallr-multiplechoices" class="button">demo</a></p>   
	                
                    <h4># Setting duration & easing effect (require easing plugin)</h4>
                    <pre><code class="javascript">
// make sure you have include jQuery easing plugin first: http://gsgd.co.uk/sandbox/jquery/easing/

$.fallr.show({
    easingDuration    : 1000,
    easingIn    : 'easeOutBounce',
    easingOut   : 'easeInElastic',
    icon        : 'window',
    position    : 'center',
    content     : '&lt;h4>Animation please&lt;/h4>&lt;p>Oh pretty. Everyone loves animation.&lt;/p>'
}); 
                    </code></pre>
                    <p><a href="#fallr-easing" class="button">demo</a></p>
                    
                    <h4># Passing callback function</h4>
                    <pre><code class="javascript">
var hide2 = function(){
    $.fallr.hide(function(){
        alert('callback after 2nd hide');
    });
};

var hide1 = function(n){
    $.fallr.hide(function(){
        alert('Hi, this is a callback after hide');
        $.fallr.show({
            content     : '&lt;p>You choose: ' + n + '&lt;/p>',
            position    : 'bottom',
            buttons     : {
                            button1 : {text: 'OK', onclick: hide2}
            }              
        }, function(){
            alert('callback after 2nd show');
        });
    });
};
	                
$.fallr.show({
    icon        : 'help',
    content     : '&lt;p>Arsenal or Liverpool?&lt;/p>',
    buttons     : {
                    button1 : {text: 'Arsenal', onclick: function(){hide1('Arsenal');}},
                    button2 : {text: 'Liverpool', onclick: function(){hide1('Liverpool');}}
    },
}, function(){
    alert('Hi, this is a callback after show');
});
                    </code></pre>
                    <p><a href="#fallr-callback" class="button">demo</a></p>
                    
                    <h4># Custom size & On-the-fly Auto resize</h4>
                    <pre><code class="javascript">
var smaller = function(){
    $.fallr.resize({width: '300px', height: '300px'});
};
var bigger = function(){
    $.fallr.resize({width: '500px', height: '500px'});
};
$.fallr.show({
    content : '&lt;h4>Resize method&lt;/h4>&lt;p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."&lt;/p>',
    buttons : {
        button1 : {text: 'Smaller', onclick: smaller},
        button2 : {text: 'Bigger', onclick: bigger},
        button3 : {text: 'Cancel'}
    },
    width: '300px',
    height: '300px',
    position: 'center',
    icon: 'left'
}, function(){
    // on show callback
    $.fallr.resize({width: '400px', height: '400px'});
});
                    </code></pre>
                    <p><a href="#fallr-autoresize" class="button">demo</a></p>
                    
                    <h4># Autoclose after 5 seconds</h4>
<pre><code class="javascript">$.fallr.show({
    buttons     : {},
    content     : '&lt;h4>Autoclose&lt;/h4>&lt;p>This will be self closing after 5 seconds&lt;/p>&lt;p>No buttons haz teh present haha LOL so just wait plz&lt;/p>',
    autoclose   : 5000,
    icon        : 'clock'
});</code></pre>
                    <p><a href="#fallr-autoclose" class="button">demo</a></p>
                    
                    <h4># Special Effects: Blink, Shake</h4>
<pre><code class="javascript">var blinkIt = function(){
    $.fallr.blink();
};
var shakeIt = function(){
    $.fallr.shake();
};

$.fallr.show({
    content     : '&lt;h4>Special Effects&lt;/h4>',
    position    : 'center',
    icon        : 'star',
    buttons     : {
        button1 : {text: 'Blink', onclick: blinkIt},
        button2 : {text: 'Shake', onclick: shakeIt},
        button3 : {text: 'Cancel'}    
    }
});</code></pre>
                    <p><a href="#fallr-effect" class="button">demo</a></p>
                                 
                </div>
                
                <div class="clear"></div>

            <h4># Etc. (will be added later) <br>See more: <a href="https://github.com/faisalman/fallr-js#fallrjs">https://github.com/faisalman/fallr-js</a></h4>
               
            </div>
            <div class="clear"></div>
            <div id="footer">
                <p>Fallr.js &copy; 2011-2014 Faisal Salman &lt;f@faisalman.com&gt; Dual licensed under GPLv2 or MIT</div>
        </div>
        <div class="clear"></div>
    </div>
</body>
</html>