CODEWITHSUNDEEP
jquery
ledgeJumper
ledgeJumper

Reputation: 3630

jQuery function to move a div left/right when clicking another div

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.

Upvotes: 1

Views: 2938

Answers (2)

shaunsantacruz
shaunsantacruz

Reputation: 8930

You need to use the $(document).ready() handler:

$(document).ready(function() {
    //Your code here
});

Upvotes: 1

Ricardo Souza
Ricardo Souza

Reputation: 16446

Try to use an absolute position (including 'px') in the left= property:

...
$('#leftFlyout').animate({
        left: '-200px'
    }, 458, ...

And also, your code says:

if I click clickMe move rightFlyout 200px right.
if I click again, move leftFlyout 200px left.
if I click clickMe move rightFlyout 200px right.
and so on.

If you want to move one of these and restore the other to the original position, you will have to add the code to restore it at each function (the toggle doesn't restores the changes of the called functions).

Upvotes: 0

Related Questions