scrollTo and horizontal tables

Question

I am attempting to make a horizontal scrolling portfolio site. I want to users to be able to click through the images using a next/previous button as well as scrolling as per usual with the mouse and scroll bars. I am, however, having trouble implementing this using jquery.

The table is used as this is best practice in horizontal websites. I wish to use the scrollTo() plugin to allow the table to scroll forwards or backwards depending on which button is clicked.

The end product would resemble this, although I have tried to utilise the code on this site with NO luck at all!

I am lost on how to do this.

My HTML is as follows:

     <div id="content">

  <div id="contentRight">

   <ul id="direction">

    <li id="next"><a class="forward">Next</a></li>
    <li id="prev"><a class="back">Previous</a></li>

   </ul>

   <table id="work">

    <tr>

     <td id="horseOneImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td>
     <td id="horseTwoImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td>
     <td id="horseThreeImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td>
     <td id="horseFourImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td>
     <td id="horseFiveImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td>
     <td id="horseSixImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td>
     <td id="horseSevenImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td>
     <td id="horseEightImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td>

       </tr>

      </table> 

  </div>

 </div>

I have no current jQuery to add as anything I have tried is just a mess.

Any help would be great!

It's not a case of having access to the file, it's more that I just cannot get it to work! — DanC, Jul 13 '10 at 19:05

score 1 · Accepted Answer · 2010-07-14T12:27:58.583

HTML

<!DOCTYPE html>

<html>
<title>Slider !!</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" ></script>
</head>
<body>
    <div id="content">
        <div id="contentRight">
            <ul id="direction">
                <li id="next"><a href="#" class="forward">Next</a></li>
                <li id="prev"><a href="#" class="back">Previous</a></li>
            </ul>

            <center>
                <table id="work">
                    <tr>
                         <td id="horseOneImage"    class="mainImage"><img src="http://blog.foreignpolicy.com/files/images/bird.jpg" alt="" /></td>
                         <td id="horseTwoImage"    class="mainImage"><img src="http://blog.foreignpolicy.com/files/images/bird.jpg" alt="" /></td>
                         <td id="horseThreeImage"  class="mainImage"><img src="http://blog.foreignpolicy.com/files/images/bird.jpg" alt="" /></td>
                         <td id="horseFourImage"   class="mainImage"><img src="http://blog.foreignpolicy.com/files/images/bird.jpg" alt="" /></td>
                         <td id="horseFiveImage"   class="mainImage"><img src="http://blog.foreignpolicy.com/files/images/bird.jpg" alt="" /></td>
                         <td id="horseSixImage"    class="mainImage"><img src="http://blog.foreignpolicy.com/files/images/bird.jpg" alt="" /></td>
                         <td id="horseSevenImage"  class="mainImage"><img src="http://blog.foreignpolicy.com/files/images/bird.jpg" alt="" /></td>
                         <td id="horseEightImage"  class="mainImage"><img src="http://blog.foreignpolicy.com/files/images/bird.jpg" alt="" /></td>

                    </tr>
                </table> 
            </center>
    </div>
</div>

</body>

</html>

javascript

<script type="text/javascript">


$(document).ready(function() {
    var margin = 0;


    var length = $('.mainImage').length;
    var width  = $('img:first').width();
    var height = $('img:first').height();

    $('table#work').width(width).height(height).css({overflow:'hidden'});
    $('table#work tr').css({width:width*length,height:height,overflow:'hidden',position:'absolute'});
    $('td.mainImage,td.mainImage img').css({width:width,height:height});

    $('#next').click(function() {
            margin +=width;
            if(margin > width*(length-1)) { margin = width*(length-1); return;}
        $('#wrap').stop().animate({left:"+="+width},1000);  
        $('html,body,table').stop().animate({scrollLeft:"+="+width},1000); 
    });

    $('#prev').click(function() {
            margin -=width;
            if(margin<0) { margin = 0; return;}
        $('#wrap').stop().animate({left:"-="+width},1000);  
        $('#prev,#next,html,body,table').stop().animate({scrollLeft:"-="+width},1000 );
    });
});
</script>

here's the Demo

This is great and works great except one thing - the scroll bar at the bottom grows so much that it is impossible to scroll back to view the first image once you get to the last - the only way is to keep clicking the previous button. Is there anyway the same effect can be done by only adjusting the position of the scroll bar? — DanC, Jul 14 '10 at 09:44
you mean, Do u need a Handle(controller) to slide your Images, Are you asking me for some thing like this http://bit.ly/i0TUT ?? Please let me know, If possible I can help you. Have a Nice Day Dan — , Jul 14 '10 at 10:26
Not really! In your example above, when you click on 'next' it basically hides the images you have already seen, I simply want the table#work to scroll along its x axis for a determined number of pixels. Something like $('#forward').click(function() { $('table#work tr').stop().scrollTo( '+=738', 800, {axis:'x'} ); }); — DanC, Jul 14 '10 at 10:36
Thanks for all your help, I was just going about it all the wrong way! Turns out I shouldn't have tried to scroll the table, it was the window itself - working jQuery is - $('#forward').click(function() {$scrollTo('+=560px', 800, {axis:'x' });});$('#back').click(function() {$.scrollTo('-=560px', 800, { axis:'x' });}); — DanC, Jul 14 '10 at 12:08
Thanks for the edit but I hadn't given up - just found an alternative solution is all! Thanks again dude! — DanC, Jul 14 '10 at 17:24

score 0 · Answer 2 · edited May 23 '17 at 12:13

0

Does this help at all?

jQuery.ScrollTo / jQuery.SerialScroll Horizontal Scrolling

And I'm not sure tables would be the way to go...

edited May 23 '17 at 12:13

Community

1
1

answered Jul 13 '10 at 18:44

Capt Otis

1,250
1
12
18

The whole table should be able to be scrolled using the scroll bars as well not just with the buttons. Oh and tables are for sure the way forward with horizontal sites! – DanC Jul 13 '10 at 19:06
@DanC that's a pretty bold statement. What about floats? or Flash? maybe it should just be an unordered list with some jQuery magic. There is *never* one answer to a programming problem. – Alex Larzelere Jul 13 '10 at 19:49
I never said ONE answer, just that tables is the best way to go! Check out the article over at CSS-Tricks for more info - http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/ – DanC Jul 14 '10 at 09:26

scrollTo and horizontal tables

2 Answers2

Linked