Jquery animated div fullscreen

Jquery animated div fullscreen

by alcosbarco

HTML

<body>
        <h1 align=center> Header (To be covered on Fullscreen) </h1>
        <div id='controls' style="background-color:green;" align="center">
            <input type='button' value='fullscreen' onclick='fullscreen();' />
        </div>
    </body>

CSS

#controls{
                width:100px;
                height:100px;
                margin: auto auto auto auto;
            }   
            body, html{
                height:100%;
            }

JavaScript

var isFullscreen = false;
            
            function fullscreen(){      
                var d = {};
                var speed = 300;
                if(!isFullscreen){ // MAXIMIZATION
                    d.width = "100%";
                    d.height = "100%"; 
                    isFullscreen = true;
                    $("h1").slideUp(speed);
                }
                else{ // MINIMIZATION            
                    d.width = "300px";
                    d.height = "100px";            
                    isFullscreen = false;
                    $("h1").slideDown(speed);
                }
                $("#controls").animate(d,speed);            
            }