Looking for guidance as I dive into jQuery and navigate the complexities...
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="body">
<div id="flip_body">
<div id="top_body">
<div id="top_body_left">
<p id="text">String test to check for wrapping</p>
<div id="left_test" class="test">
</div>
<div id="right_test" class="test">
</div>
</div>
<div id="top_body_right">
</div>
</div>
<div id="bottom_body">
</div>
</div>
<div id="flip">
<p>Flip</p>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
<html>
CSS:
#container
{
width:1000px;
height:600px;
background-color:red;
}
#header
{
width:100%;
height:15%;
background-color:orange;
}
#body
{
width:100%;
height:70%;
background-color:yellow;
}
#top_body
{
width:100%;
height:100%;
background-color:red;
}
#bottom_body
{
width:100%;
height:100%;
background-color:pink;
display:none;
}
#flip_body
{
width:90%;
height:100%;
float:left;
position:relative;
}
#flip
{
width:10%;
height:100%;
float:left;
background-color:green;
}
#top_body_left
{
height:100%;
float:left;
background-color:teal;
position:absolute;
left:0px;
top:0px;
bottom: 0px;
width: 250px;
}
#top_body_right
{
height:100%;
float:left;
background-color:black;
position:absolute;
left:300px;
top:0px;
bottom: 0px;
width: 200px;
}
#text
{
overflow:hidden;
}
#left_test
{
background-color:orange;
}
#right_test
{
background-color:red;
width:150px;
}
.test
{
width:100px;
height:100px;
float:left;
}
#footer
{
width:100%;
height:15%;
background-color:blue;
}
jQuery:
$(document).ready(function(){
$("#flip").data("open", false);
$("#flip").click(function() {
// slide to the right
if ($(this).data("open") == false) {
$("#top_body_left").animate({width:'toggle'},500);
$("#top_body_right").animate({width: '+=100', duration:500});
$(this).data("open", true);
}
// slide to the left
else {
$("#top_body_left").animate({width:'toggle'},500);
$("#top_body_right").animate({width:'-=100'},500);
$(this).data("open", false);
}
});
});
Seeking advice on how to prevent children elements within #top_body_left from rearranging or wrapping when toggling. Is there a way to toggle without impacting the layout or content structure? Considering the use of CSS clip, but unsure if it's the right solution.