I'm working on some code that's supposed to create a notebook opening effect, but I'm running into an issue.
<html>
<style>
#container
{
position:absolute;
width:570px;
height:360px;
}
inner
{
height:360px;
position: relative;
float:left;
width:570px;
}
#div1
{
background-color:red;
overflow:hidden;
height:360px;
position: relative;
float:left;
width:570px;
}
#div2
{
background-color:yellow;
overflow:hidden;
height:360px;
position: relative;
float:left;
width:0px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var flipped = false;
function flip() {
if (flipped==false)
{
$("#div2").animate({
width: '570px'
}, { duration: 2000, queue: false });
$("#div1").animate({
width: '0px'
}, { duration: 2000, queue: false });
flipped=true;
}
else
{
$("#div2").animate({
width: '0px'
}, { duration: 2000, queue: false });
$("#div1").animate({
width: '570px'
}, { duration: 2000, queue: false });
flipped=false;
}
}
</script>
<body>
<input type="button" onClick="flip()" value="flip">
<div id="container">
<div id="div1">
<label>Some field:</label><input type="text">
</div>
<div id="div2">
<label>Some other field:</label><input type="text">
</div>
</div>
</body>
My goal is to keep the text and input elements in place when the div shrinks or expands. Is there a way to achieve this?
Thank you,