Yes, this sounds like a simple question, and it probably is. But when i am implementing some of the solutions I an finding, not of them are working.
Basically I have a main content div and behind that div I have a small sidebar div that I would like to animate out from behind the main div when i click on an element. Seems simple? Well my head can’t quite code it right.. Also, jQuery noob here if we are going to be completely honest:
Here is the relevent HTML:
<div id="clickme" style="z-index: 900; background-color:Black; width: 50px; height: 50px;"></div>
<div id="superMain">
<div id="leftFlyout"></div>
<div class="main"><asp:ContentPlaceHolder ID="MainContent" runat="server"/></div>
<div id="rightFlyout"></div>
</div>
Here is the CSS
#rightFlyout
{
width: 75px;
height: 400px;
background-color: Red;
position: absolute;
top: 0;
left: 875px;
}
#leftFlyout
{
float:left;
width: 75px;
height: 400px;
background-color: Red;
position: absolute;
top: 0;
left: 10px;
}
#superMain
{
position:relative;
}
.main
{
border-left:1px solid black;
border-right:1px solid black;
border-bottom:1px solid black;
padding: 0px;
padding-top: 10px;
margin: 0px auto;
min-height: 420px;
height:auto;
width: 940px;
background-color: White;
z-index: 10;
}
annnnnnd, the jQuery (the whole header in case i messed that up too somehow)
<head runat="server">
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
<script>
$('#clickme').toggle(function () {
$('#rightFlyout').animate({
left: '+=200'
}, 458, 'swing', function () {
// Animation complete. CALLBACK?
});
}, function () {
$('#leftFlyout').animate({
left: '-=200'
}, 458, 'swing', function () {
// Animation complete. CALLBACK?
});
});
</script>
</head>
Please help! And if it is a ridiculously dumb mistake I am making, please mock relentlessly.
You need to use the
$(document).ready()handler: