Auto-scroll to a div when clicking on another div

Question

When I click on one of the smaller divs on the left (inside of the div with the class "smallitems", I want for the div on the right (with the class "items") to auto-scroll to the appropriate larger div.

HTML:

 <div class="smallitems">
    <div class="col">1</div>
     <div class="col"> 2 </div>
     <div class="col"> 3</div>
     <div class="col">4</div>
     <div class="col"> 5 </div>
     <div class="col">6 </div>
     <div class="col"> 7</div>
    <div class="col">8</div>
 </div>    

 <div class="items">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">5</div>
</div>

JavaScript (with JQuery):

$('.smallitems .col').on("click", function(){

  //how use scroll items show

});

Example:

This is before I click on a div in the left div ("smallitems").

I've now clicked on the number 5 (<div class="col">5</div>) in the left div. As you can see the right div has scrolled to the 5th div (<div class="item">5</div>).

Similar to the above, I've clicked on the number 4, and subsequently have had the right div auto-scroll to the 4th div.

see jfiddle http://jsfiddle.net/h7bLK/

Answer 1

According to requirement, no-need to use javascript or jquery. Its done only using css. 


    <div class="main-container">
            <div class="smallitems">
             <div class="col"><a href="#one">1</a></div>
              <div class="col"> <a href="#two">2</a> </div>
              <div class="col last-child"><a href="#three">3</a></div>
              <div class="col"><a href="#four">4</a></div>
              <div class="col"><a href="#five">5</a> </div>
              <div class="col last-child"><a href="#six">6</a> </div>
              <div class="col"> <a href="#seven">7</a></div>
             <div class="col"><a href="#eight">8</a></div>
          </div>    

        <div class="items">
            <div class="scroll">
                <div class="item" id="one">1</div>
                <div class="item" id="two">2</div>
                <div class="item" id="three">3</div>
                <div class="item" id="four">4</div>
                <div class="item" id="five">5</div>
                <div class="item" id="six">6</div>
                <div class="item" id="seven">7</div>
                <div class="item" id="eight">8</div>
            </div>

       </div>
    </div>

**Css** :

.main-container{
margin: 20px auto; 
width:960px; 
overflow: hidden; 
border: 1px solid #bababa;
padding: 5px;
}

.smallitems{ 
overflow: hidden; 
float: left; 
width:330px; 
border: 1px solid #bababa;
 display: table; 
padding: 10px;
}

.col a{ 
display: block;
 padding: 41px 0; 
text-decoration: none;
}


.col{ 
float:left;
display: table-cell;
 vertical-align: middle;
 text-align: center; 
font-size: 14px; 
font-weight: 700; 
cursor: pointer; 
border: 1px solid #bababa;
 height: 100px; 
width: 100px; 
margin: 0 10px 10px 0;
}

.items{
float: right;
 width:580px; 
border: 1px solid #bababa; 
overflow-y: hidden;
 white-space: nowrap;
 padding: 10px;
}

.col:nth-child(3),.last-child{
margin-right: 0;
}

.item{
display: inline-block;
text-align: center; 
position:relative;
font-size: 14px; 
font-weight: 700; 
border: 1px solid #bababa; 
height: 440px; 
width: 180px; 
margin: 0 10px 10px 0;
}

Answer 2

$('.smallitems .col').on("click", function(){
    var index =  $(this).index();
    var items = $('.items');
    var item =  items.children().eq(index);
    items.scrollLeft((item.width() - 50)  * index);
});

When you add a new div to the items play around with the value of 50.

Answer 3

This can be done with anchors. If you replace your div.cols with anchor tags and add an ID to your div.items like this:

<div class="smallitems">
    <a class="col" href="#item1">1</a>
    <a class="col" href="#item2">2</a>
    . . . 
</div>
<div class="items">
    <div class="item" id="item1">1</div>
    <div class="item" id="item2">2</div>
    . . . 
</div>

Fiddle link

BONUS: You'll be able to link externally to the correct item.

CONS: If the content is smaller than the frame it is rendered in, the whole frame will scroll.

Answer 4

<div class="container">
    <div class="smallitems">
        <div class="col">1</div>
         <div class="col"> 2 </div>
         <div class="col"> 3</div>
         <div class="col">4</div>
         <div class="col"> 5 </div>
         <div class="col">6 </div>
         <div class="col"> 7</div>
        <div class="col">8</div>
    </div>    
    <div class="items" id="maindiv"> // set id 
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">5</div>
    </div>
</div>   

$('.smallitems').on("click", function(e){ 
     // get click element text and calculate scrollLeft
     var scrollLeft = (parseInt($(e.target).text())-1) * 200;
     // use jquery animation function
     $('#maindiv').animate({scrollLeft :scrollLeft},1100)
});