5

I'm trying to animate a div to fill the screen and then return to its original size again. However, when i make the div fill the screen it doesn't animate from the centre, it starts from the top right. Furthermore, when I minimize it, it doesn't return to the starting position but to the top left.

I have the jsfiddle code here. I'm trying to get it to animate smoothly from its starting point at the centre, fill the screen and then backwards to its starting position like in the begining.

Zeeno
  • 2,571
  • 7
  • 33
  • 58
  • Before the animation your div is already in the top-left corner, why do you change its style like that?? – MatTheCat Aug 23 '11 at 10:09

3 Answers3

4

I suggest that your moving div has always position: relative;, and contained in a div with position: absolute;, and that he is centered this way

Here is a working example of what you want: http://jsfiddle.net/FP2DZ/.

Community
  • 1
  • 1
Benjamin Crouzier
  • 34,915
  • 36
  • 154
  • 219
3

Another method without the extra div used by pinouchon. jsFiddle is here: 

<html>
    <head>
        <script type="text/javascript">
            var isFullscreen = false;

            function fullscreen(){      
                var d = {};
                var speed = 900;
                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);            
            }

        </script> 
        <style> 
            #controls{
                width:300px;
                height:100px;
                margin: auto auto auto auto;
            }   
            body, html{
                height:100%;
            }

        </style> 

    </head>
    <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>
</html>
Patrick
  • 7,599
  • 7
  • 49
  • 71
1

I think this is what you want:

<html>
    <head>
        <script type="text/javascript">
            var isFullscreen = false;

            function fullscreen(){

                var d = {};
                var speed = 900;
                if(!isFullscreen){ // MAXIMIZATION

                    d.width = "100%";
                    d.height="100%";                    
                    d.left="0%";
                    d.top="0%";
                    d.marginLeft="0px";

                    $("#controls").animate(d,speed);
                    isFullscreen = true;

                }else{ // MINIMIZATION

                    d.width="300px";
                    d.height="100px";
                    d.left="50%";
                    d.top="50%";
                    d.marginLeft="-150px";


                    $("#controls").animate(d,speed);
                    isFullscreen = false;
                }

            }

        </script> 
        <style>
            #controls{
                width:300px;
                height:100px;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -150px;
            }
        </style>
    </head>
    <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>
</html>

But I guess I was a bit late ;)

Patrik
  • 419
  • 4
  • 10