This my page here, the header and left nav collapse. the problem when the header is collapsed the left one wont work at all. If the left is collapsed. The header always will. Any suggestions.
<!DOCTYPE HTML>
<html>
<head>
<title>Myrexis CTMS » Login</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<link href="css/clean.css" media="screen" rel="stylesheet" type="text/css"/>
<link href="css/main.css" media="screen" rel="stylesheet" type="text/css"/>
<link href="css/login.css" media="screen" rel="stylesheet" type="text/css"/>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<script type="text/javascript">
$(document).ready(function(){
$("#header-handle").toggle(
function() {
$("#header").animate( { "height": "20px" }, 300);
$("#container").css("padding-top", "50px");
$(this).addClass('collapse-down');
},
function() {
$("#header").animate( { "height": "70px" }, 300);
$("#container").css("padding-top", "100px");
$(this).removeClass('collapse-down');
}
);
$("#nav-handle").toggle(
function() {
$("#nav").animate( { "width": "toggle" }, 300);
$("#container").css("padding-left", "20px");
$(this).addClass('collapse-right');
},
function() {
$("#nav").animate( { "width": "toggle" }, 300);
$("#container").css("padding-left", "190px");
$(this).removeClass('collapse-right');
}
);
$("#footer-handle").toggle(
function() {
$("#footer").animate( { "height": "toggle" }, 300);
$("#container").css("padding-bottom", "23px");
$(this).addClass('collapse-up');
},
function() {
$("#footer").animate( { "height": "toggle" }, 300);
$("#container").css("padding-bottom", "83px");
$(this).removeClass('collapse-up');
}
);
});
</script>
</head>
<body>
<div id="top">
<div id="header-band" class="band"><div class="band-red"></div><div class="band-blue"></div><div class="band-grey"></div><div class="band-green"></div></div>
<div id="header">
<a href="/mctms/logout">Logout</a> (roleAnonymous)
<div id="header-handle" class="collapse-top"> </div>
</div>
</div>
<div id="flash"></div>
<div id="container" stlye="clear:both;">
<div id="nav" >
<ul id="menu">
<li><a href="/mctms/app/auth/changePassword">Change Password</a></li>
<li><a href="/mctms/app/site/list">Manage Sites</a></li>
<li><a href="/mctms/app/study/list">Manage Studies</a></li>
</ul>
</div>
<div id="nav-handle" class="collapse-sideleft"> </div>
<div id="content">
<h1>Login</h1>
<!-- this form-login-page form is also used as the
form-error-page to ask for a login again.
-->
<form name="f" action="/mctms/login" method="post">
<label for="j_username">Username:</label>
<input type="text" name="j_username" id="j_username" placeholder="enter username" />
<label for="j_password">Password:</label>
<input type="password" name="j_password" id="j_password" placeholder="enter password" />
<input name="submit" id="submit" type="submit" value="Login" />
<input name="reset" id="reset" type="reset" value="Reset" />
</form>
</div>
<div>This is no longer the most up-to-date version.</div>
</div>
<div id="footer">
<p id="copy">©2010 Myrexis, Inc.</p>
<img id="logo" src="img/myrexis-logo.png" height="30" width="100" alt="Myrexis Logo"/>
</div>
<div id="footer-band" class="band"><div class="band-red"></div><div class="band-blue"></div><div class="band-grey"></div><div class="band-green"></div></div>
<div id="footer-handle" class="collapse-bottom"> </div>
</body>
</html>