Question

On my page I have one navigation menu and two content containers.

The content containers use overflow:hidden so that only one of the child div’s show at one time.

What I would like is for the navigation links to act as activators for the related content to scroll in to view in the containers.

So, for example if I was to press Link2 on the navigation I would like div anchor2 in First Content Box and anchor2 in Second Content Box to scroll in to view.

See example code below:

Navigation

  <div id="navigation">
  <div class="nav_link"><a href="anchor1">Link1</a></div>
  <div class="nav_link"><a href="anchor2">Link2</a></div>
  <div class="nav_link"><a href="anchor3">Link3</a></div>
  <div class="nav_link"><a href="anchor4">Link4</a></div>
  </div>

First Content Box

  <div id="page_identifier_box">
  <div class="anchor1"></div>
  <div class="anchor2"></div>
  <div class="anchor3"></div>
  <div class="anchor4"></div>
  </div>

Second Content Box

  <div id="page_information_box">
  <div class="anchor1"></div>
  <div class="anchor2"></div>
  <div class="anchor3"></div>
  <div class="anchor4"></div>
  </div>

My conclusions

1. If I was only controlling one content box via the navigation I would use unique anchors. This method does not work with my dilemma though as you can only point to one anchor in a link and even if I was to put the same name anchor in both containers the browser would only initiate the first container anchor and then give up.

2. My idea is to use some sort of jquery script or php script to tell all containers to scroll to specific div class (for example div class anchor3). This is a theory but I have no clue how this would work.

Answer 1

Based on zgood’s solution I have managed to adapt to take in to account the possibility of different variations on container widths. Here is my solution in case anybody else was looking for it.

CSS Code

In this part we separate the page_indentifier_box and page_information box and give each it’s own unique inner (& secondinner) and slide (&secondslide) properties.

#page_identifier_box{
overflow:hidden;
float:left;
width:100px;
}

.slide{
width:100px;
float:left;
}

.inner{
width:400px;
}

#page_information_box{
overflow:hidden;
float:left;
width:200px;
}

.secondslide{
width:200px;
float:left;
}

.secondinner{
width:800px;
}

JQuery Code

In this part we create a new var, in this case “var g” to control the second container.

$(document).ready(function () {
$('.nav_link').click(function (e) {
    e.preventDefault();
    var s = $(this).find('a').attr('href');
    var m = "0px";
    switch (s) {
        case 'anchor2':
            m = "-100px";
            break;
        case 'anchor3':
            m = "-200px";
            break;
        case 'anchor4':
            m = "-300px";
            break;
    }
    var g = "0px";
    switch (s) {
        case 'anchor2':
            g = "-200px";
            break;
        case 'anchor3':
            g = "-400px";
            break;
        case 'anchor4':
            g = "-600px";
            break;
    }
    $('.inner').animate({ marginLeft: m }, 750);
    $('.secondinner').animate({ marginLeft: g }, 750);
});
});

HTML Code

again here we adapt the html for the second container to allow for the use of the above new values for the second container.

<div id="navigation">
<div class="nav_link"><a href="anchor1">Link1</a></div>
<div class="nav_link"><a href="anchor2">Link2</a></div>
<div class="nav_link"><a href="anchor3">Link3</a></div>
<div class="nav_link"><a href="anchor4">Link4</a></div>
</div>

<div id="page_identifier_box">
   <div class="inner">
      <div class="anchor1 slide">anchor1</div>
      <div class="anchor2 slide">anchor2</div>
      <div class="anchor3 slide">anchor3</div>
      <div class="anchor4 slide">anchor4</div>
  </div>
</div>

<div id="page_information_box">
  <div class="secondinner">
      <div class="anchor1 secondslide">anchor1</div>
      <div class="anchor2 secondslide">anchor2</div>
      <div class="anchor3 secondslide">anchor3</div>
      <div class="anchor4 secondslide">anchor4</div>
  </div>
</div>

Summary

Hope this all makes sense. A big thanks to zgood for his help and all others that replied with an answer!