horizontal "paging" or scrolling in a "viewport" on a web page

I have three columns of information and I'开发者_C百科d like to present a portion of this information in a "viewport" (for lack of a better term) that displays only one column at a time. The user can scroll left and right to view the other columns, but there also need to be buttons directly access, e.g., view A, view B, and view C. Below is my attempt at a crude ASCII illustration:

textA               textB           textC
textA               textB           textC
textA               textB           textC
textA           _____________       textC
textA           |   textB   |       textC
textA           |   textB   |       textC
textA           |   textB   |       textC
textA           |   textB   |       textC
textA           |   textB   |       textC
textA           _____________       textC

         | view A | view B | view C |

Note that only the stuff is the "viewport" is visible to the user, and the buttons below the viewport should scroll the underlying column into the viewport. I hope I'm explaining this well enough :)

I'm sure the stock answer is some variety of "use JQuery", but any specific tips or hints would be greatly appreciated. Even if it is (sadly) "can't be done". Thanks!

Here is your answer tested: http://jsfiddle.net/maniator/8fFVD/2/
(this is with a next and prev, it can be expanded to select the paragraph you want to view)

css:

#viewPort {
    overflow: auto;
    height: 200px;
    width: 250px;
    background: black;
    color: white;
}

.data {
    display: none;
}

html:

<div id="viewPort">

    <div class='data'>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sollicitudin pulvinar dolor, vel dignissim velit porta nec. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer aliquam adipiscing odio, quis pellentesque nunc luctus vitae. Aenean dolor sem, tristique nec semper vel, ultricies eget sapien. Nulla nulla diam, euismod ut dapibus faucibus, porta eget nibh. Vivamus tempus ipsum quis metus lobortis in tempus est egestas. Nulla pretium ultricies dignissim. Nam tincidunt lorem vitae arcu placerat mollis. Pellentesque dictum justo ac mi viverra sit amet auctor massa sollicitudin. Suspendisse nisi nisi, varius ac ultricies vel, faucibus ut risus.
    </div>
    <div class='data'>
        Nam eget magna lacus, ut accumsan elit. Sed accumsan tincidunt accumsan. Proin urna elit, porttitor sed elementum a, tempor vel nulla. Nulla sollicitudin elementum neque nec gravida. Duis vel auctor urna. Suspendisse vel nulla neque, at malesuada sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed in metus in risus suscipit lobortis eget eu urna. Quisque et tortor at augue varius cursus. Sed molestie sem eu justo porta aliquam. Donec libero dolor, aliquam euismod egestas ac, venenatis ac nulla. Suspendisse potenti. Aenean tortor orci, malesuada id pulvinar et, consequat ut lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris vel lacus erat, ultrices volutpat libero. Suspendisse mi magna, placerat quis ultrices et, condimentum vitae nisi. Aenean tellus tortor, dignissim nec facilisis a, tempus vel arcu. Cras lacinia porta rhoncus. Cras vel nunc eget felis varius gravida in in eros.
    </div>
    <div class='data'>
        Aenean facilisis, nisi et sodales iaculis, purus enim eleifend ante, quis cursus justo elit ut ligula. In eleifend turpis tellus, nec mollis dolor. Nunc blandit tellus nec nunc consequat a bibendum mi aliquet. Sed et velit id mauris malesuada blandit. Pellentesque commodo metus vel magna bibendum at volutpat turpis placerat. Aenean rutrum molestie velit, eu consectetur tellus placerat vitae. Morbi nisi dolor, tempus convallis sagittis at, aliquet in justo. Proin nec elit faucibus metus interdum commodo. Ut in vulputate est. Proin malesuada elit eget libero adipiscing eu tempus mi malesuada. Mauris consectetur elit vitae velit mattis tristique. Quisque sed ipsum sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse posuere dui vel lacus tempor tincidunt. Ut enim mi, aliquet sit amet fermentum non, volutpat in tortor. Nulla sed nisl tellus, eget imperdiet libero.
    </div>
</div>
<span class='n'>NEXT</span><br/><span class='p'>PREV</span>

and finally js:

var index = 0;
var columns = $('.data');
columns.eq(index).show()

$('.n').click(function(){
     columns.eq(index).hide()
     index++;
     if(index+1 > $('.data').length) index = 0;
     columns.eq(index).show()
})

$('.p').click(function(){
     columns.eq(index).hide()
     index--;
     if(index < 0) index = columns.length -1;
     columns.eq(index).show()
})

Assuming that your columns are fixed-width, "using jQuery" would make that a breeze.

Layout:

<div class="container">
  <div class="column">
    textA
  </div>
  <div class="column">
    textB
  </div>
  <div class="column">
    textC
  </div>
</div>

CSS:

.container {
  width: 300px;
  overflow: hidden;
  scroll: auto;
}

.column {
  width: 300px;
}

Example javascript:

$('#linkA').click(function() {
  $('.container').animate({marginLeft: 0});
}

$('#linkB').click(function() {
  $('.container').animate({marginLeft: -300});
}

$('#linkC').click(function() {
  $('.container').animate({marginLeft: -600});
}

Absolutely none of this is tested :).