Menu
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.
246
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/.
55
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>
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 ;)
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
