CODEWITHSUNDEEP
jquery
Nathan
Nathan

Reputation: 384

jQuery onclick scroll X to the right

Hopefully I can explain this clearly. I've got some HTML like this:

<a href="#" class="go-right">Go Right</a>
<div class="overflow-hidden">
  <table>
    <tr>
      <td>This is content</td>
    </tr>
    <tr>
      <td>This is content</td>
    </tr>
    <tr>
      <td>etc.</td>
    </tr>
  </table>
</div>

The table shows performances in a schedule grid, so people can easily see what's showing when at a festival I'm working on. The table itself is dynamic, and tends to be 8000 pixels wide or so. The div.overflow-hidden is responsive, so for arguments sake lets say we're looking at it on a screen that allows it to be 900px wide. The additional 7100px of the table is then hidden with overflow:hidden.

I'd like to figure out how to make it so that when the user clicks the a.go-right button, it scrolls the table 900px to the right (revealing the additional table columns that are initially hidden).

But I also don't want "900px" to be the number, instead I'd like it to scroll X number of pixels to the right, where X = the current width of div.overflow-hidden

Any ideas?

Upvotes: 0

Views: 10557

Answers (2)

Blundering Philosopher
Blundering Philosopher

Reputation: 6805

Here's a step in the right direction:

html exactly like yours:

<a href="#" class="go-right">Go Right</a>
<div class="overflow-hidden">
  <table>
    <tr>
      <td>This is content. Yep. Sweet, huh? awwww yeah that's what i thought. Just here for appearances... fyi. And still goin woot woot.</td>
    </tr>
    <tr>
      <td>This is content</td>
    </tr>
    <tr>
      <td>etc.</td>
    </tr>
  </table>
</div>

javascript to make the div scroll 50 pixels every time you click on the a tag:

$('a.go-right').click(function() {
    var pos = $('div.overflow-hidden').scrollLeft() + 50;
    $('div.overflow-hidden').scrollLeft(pos);
});

css to make the divs more obvious 'n such:

table td{
    border: 1px solid black;
}

div  {
    border: 2px solid green;
    width: 200px;
    height:100px;
    overflow: hidden;
}

table {
    width: 900px;
}

here's the link to the old fiddle: Click Here

Edit: New javascript function as you mentioned that worked for you:

$('.go-right').click(function() {
    var far = $( 'div.overflow-hidden' ).width();
    var pos = $('div.overflow-hidden').scrollLeft() + far;
    $('div.overflow-hidden').animate( { scrollLeft: pos }, 1000, 'easeOutQuad' );
});

Upvotes: 2

Nathan
Nathan

Reputation: 384

$('.go-right').click(function() {
    var far = $( 'div.overflow-hidden' ).width();
    var pos = $('div.overflow-hidden').scrollLeft() + far;
    $('div.overflow-hidden').animate( { scrollLeft: pos }, 1000, 'easeOutQuad' );
});

So the far variable uses width() to grab the current width of div.overflow-hidden. Next we set the pos variable as explained by Waffle Whomper. Finally, I animate() the scrollLeft with the pos variable, all of which make sit so clicking the .go-right anchor will move the contents inside of .overflow-hidden to the left, simulating a scroll.

Upvotes: 2

Related Questions