Sliding Panels activated by Links

Question

I have three links. I want each link to control a separate DIV (I guess within a container DIV). So when you open the page you have DIV-1, then you can click on the link for DIV-2 or 3 and the view will slide or scroll to that DIV.

How is this possible in jQuery? I've tried scrollleft to no avail.

Thanks in advance,

Stu

Answer 1

Use the .animate() method on the margins of the first Child-Cell.

Class "cell" consists of 200x200 boxes, all floated left. ID "container" is also 200x200, with an overflow of hidden. You could assign three links to animate the margin-left of the first div having the class "cell," which would move all three left or right, depending on the amount you want.

Link1 -> First Div Margin Left = 0;
Link2 -> First Div Margin Left = -200;
Link3 -> First Div Margin Left = - 400;

---

Update: The following code has been updated in response to follow up questions within the comments.

I've enclosed the cells within another div. This div is within the container. Rather than manipulating the left-margin of the first cell, we're going to manipulate the left-margin of the div that these cells reside within. Give this a shot - I've tried it and Got the desired results.

<style type="text/css">
  div#container { width:200px;height:200px;overflow:hidden; }
  div.cells { width:600px;height:200px;}
  div.cell { float:left;width:200px;height:200px;margin:0;padding:0; }
  div.cell p {margin:0;padding:0;}
</style>

<ul>
  <li><a href="#" class="box-mover">Show Box 1</a></li>
  <li><a href="#" class="box-mover">Show Box 2</a></li>
  <li><a href="#" class="box-mover">Show Box 3</a></li>
</ul>

<div id="container">
  <div class="cells">
    <div class="cell" style="background:#f1f1f1;">
      <p>Cell 1</p>
    </div>
    <div class="cell" style="background:#cc0000;color:#ffffff;">
      <p>Cell 2</p>
    </div>
    <div class="cell" style="background:#f1f1f1;">
      <p>Cell 3</p>
    </div>
  </div>
</div>

<script type="text/javascript">
  $(document).ready(function(){

    $("a.box-mover:eq(0)").click(function(event){
      event.preventDefault();
      $("div.cells").animate({"marginLeft": "0px"}, "slow");
    });
    $("a.box-mover:eq(1)").click(function(event){
      event.preventDefault();
      $("div.cells").animate({"marginLeft": "-200px"}, "slow");
    });
    $("a.box-mover:eq(2)").click(function(event){
      event.preventDefault();
      $("div.cells").animate({"marginLeft": "-400px"}, "slow");
    });

  });
</script>

Answer 2

I've used this plugin in the past for some nice animated scrolling.