horizontal scrollto

by oterox

HTML

<div class="nav">
        <ul>
            <li class="current"><a href="javascript:void(0);" class="one">Scroll to #1</a></li>
            <li><a href="javascript:void(0);" class="two">Scroll to #2</a></li>
            <li><a href="javascript:void(0);" class="three">Scroll to #3</a></li>    
            <li><a href="javascript:void(0);" class="four">Scroll to #4</a></li> 
            <li><a href="javascript:void(0);" class="five">Scroll to #5</a></li>
<li><a href="javascript:void(0);" class="six">Scroll to #6</a></li>        </ul>
<p class="position">0</p>
<p class="status"></p>
    </div>
    <div class="nav-second">
        <a href="#" class="nav-prev">prev</a>
        <a href="#" class="nav-next">next</a>
    </div>
<div id="slider">
    <ul>
        <li id="one" class="slideItem">
            <h1>Header #1</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum, ante a lacinia pharetra, ligula augue vestibulum urna, gravida placerat odio ipsum eget augue.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum, ante a lacinia pharetra, ligula augue vestibulum urna, gravida placerat odio ipsum eget augue.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum, ante a lacinia pharetra, ligula augue vestibulum urna, gravida placerat odio ipsum eget augue.</p>
        </li>
         <li id="two" class="slideItem">
            <h1>Header #2</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum, ante a lacinia pharetra, ligula augue vestibulum urna, gravida placerat odio ipsum eget augue.</p>
        </li>
          <li id="three" class="slideItem">
            <a class="open" href="#">Open</a>
            <div class="panel">
                <div class="panel1">
                    <h1>Header #3</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum, ante a lacinia pharetra, ligula augue...

CSS

body {  }
  .nav {
    width: 138px;
    float: left;
    height:100%;
    background: #BBB;
  }
  
  .nav ul { list-style: none; }
  .nav ul li { padding-bottom: 10px; }
  .nav ul li.current { background: yellow; }
    
  .nav-second { position: absolute; top: 10px; right: 0; background: #c9ac68; padding: 15px 10px; }
  
   #slider {
    display: block;
    
    overflow-x: scroll;
    height: 100%;
    }

    /* collapsing panel inside section three */
    .panel2 { display: none; }
    a.open { float: right; }

    #slider ul {
        width: 1600px; 
    }

    #slider ul li {
        display: inline-block;
        width: 600px;
        float: left;
        padding-top: 100px;
    }
    
    /* sections (future wp pages) */
    #slider ul li#one{
        width: 300px;
        background: #BEBEBE;
    }
    #slider ul li#two{
        width: 200px;
        background: #FAFAFA;
    }
    #slider ul li#three {
        width: 150px;
        background: #CCCCCC;
    }
    #slider ul li#four{
        width: 300px;
        background: #BCBCBC;
    }
    #slider ul li#five{
        width: 200px;
        background: #F8F8F8;
    }
    #slider ul li#six{
        width: 300px;
        background: #CBCBCB;
    }

JavaScript

var $panels = $('#slider > ul > li'); //all sections
var panelLeftsArray = $panels.map(function() {
        return ($(this).position().left - 138);  // make array of the lefts of content
    }).get();

var len = panelLeftsArray.length; //number of sections

var getCurrentSectionIndex = function( left) {   // take the current top position, and see which
    for( var i = 0; i < len; i++ ) {   // index should be displayed
        if( left > panelLeftsArray[i] && panelLeftsArray[i+1] && left < panelLeftsArray[i+1] ) {
            return i;
        }
    }
};
    
    var setCurrentNav = function( position) { 
        currentNavIndex  = getCurrentSectionIndex(position);
        console.log(currentNavIndex);
        //var panel=".one";
        switch(currentNavIndex)
        {
            case 0: panel = ".one";
            break;
            case 1: panel = ".two";
            break;
            case 2: panel = ".three";
            break;
            case 3: panel = ".four";
            break;
            case 4: panel = ".five";
            break;
            case 5: panel = ".six";
            break;
            default: panel =".one";
        }
        //console.log($('.nav li.current a').attr('class'));
        $('.nav li.current a')
            .parent()
            .removeClass('current')
            .parent()
            .find(panel)
            .parent()
            .addClass('current');  
         console.log($('.nav li.current a').attr('class'));         
    };


$('.nav a').click(function() {
    // there's a better way of doing this?
    $('.nav li').removeClass('current');
    $(this).parent().addClass('current');
    
    var position = Math.abs( $('#slider ul').offset().left - 138 );
    $('p.status').html( getCurrentSectionIndex(position) );
    
    //disable the scroll event so it doesn't broke the flow
    $('#slider').unbind('scroll',handler);
    
    //scrolls to the selected section
    $('#slider').scrollTo($('#' + $(this).attr('class')),...