CODEWITHSUNDEEP
jqueryhtmlcsstraversal
sooon
sooon

Reputation: 4878

jquery traversing

I am trying to get Jquery to animate some long layout horizontally but can't seems to make it work. I suspect is a traversing problem but tried for hours and cannot get it fix. Please help and thanks in advance.

I am trying to get the "innerlonglayout" to scroll horizontally with the click of the button.

here are my code:

    <div id="innermask">
  <div id="innerlonglayout">
     <div class="container-bits">Content Here</div>
     <div class="container-bits">Content Here</div>
     <div class="container-bits">Content Here</div>
     <div class="container-bits">Content Here</div>
     <div class="container-bits">Content Here</div>
     <div class="container-bits">Content Here</div>
  </div>
</div>
<div class="boxmenu">
            <span id="2002"><img src="images/butt_2002.png"></span>
            <span id="2003"><img src="images/butt_2003.png"></span>
            <span id="2004"><img src="images/butt_2004.png"></span>
            <script>
                $("#2002").click(function() {
                     $("#2002").parent().parent().parent().children().children().animate({position:'fixed',left:'30px'}, "slow");
                });
                $("#2003").click(function() {
                     $("#2002").parent().parent().children().children().animate({position:'fixed',left:'-300px'}, "slow");
                });
                $("#2004").click(function() {
                     $("#2002").parent().parent().children().children("#innerlonglayout").animate({position:'fixed',left:'-600px'}, "slow");
                });
                </script>
         </div>

And here are my CSS:

#innermask{
 width:500px;
 height:250px;
     border:1px solid #cc61b8;
     overflow:hidden;
}

#innerlonglayout{
     width:10000px;          // just an example
}

.container-bits{
    width:250px;
    height:498px;
    float:left;
}

Upvotes: 0

Views: 221

Answers (2)

sooon
sooon

Reputation: 4878

I found out what is the problem.

in order to use jquery to animate anything, you have to set position: Absolute for the Div.

Thank you all for the reply.

Upvotes: 1

Jason
Jason

Reputation: 52533

It's possible that your numeric IDs are messing with your jQuery. Try using unique IDs that start with letters.

Upvotes: 0

Related Questions