ansaurus

Question

Answer 1

A:

Does this help at all?

http://stackoverflow.com/questions/211111/jquery-scrollto-jquery-serialscroll-horizontal-scrolling

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

Capt Otis 2010-07-13 18:44:49

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 2010-07-13 19:06:28

@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 2010-07-13 19:49:59

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 2010-07-14 09:26:06

Answer 2

+2 A:

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

Ninja Dude 2010-07-13 19:26:35

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 2010-07-14 09:44:34

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

Ninja Dude 2010-07-14 10:26:07

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 2010-07-14 10:36:48

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 2010-07-14 12:08:21

Thanks for the edit but I hadn't given up - just found an alternative solution is all! Thanks again dude!

DanC 2010-07-14 17:24:12

ansaurus

tags:

views:

answers:

scrollTo and horizontal tables

related questions