Question

I have a fixed div size width. i’ll denote this as x

I have a fixed div size height.

I want to add buttons to either side of the div allowing the user to navigate right i.e. moving x amount of pixels to the right, i.e. showing the next entry in the div.

Can anyone suggest a solution to this problem?

Here is my current html / css:

<div class="outer_container" style="overflow: scroll; overflow-y: hidden; width:577px; border-style:solid; border-width:5px; border-color:#578278;">
    <div class="inner_container" style="width: 10000px;">

<table>
    <tr>
        <td style=" width: 577px; ">
            <div style="text-align:left;  margin: 0px 10px 10px 10px; width:557px; ">
                <p>Add Comment to the Tesco Catalogue</p>
                <form class="comment_form" action="profile" method="post">
                    <textarea style="resize:none;" maxlength="250" rows="2" cols="65" placeholder="Enter your comment here..."></textarea>
                    <input type="submit" value="Submit"/>
                </form>
            </div>
        </td>
        <!-- do a for loop here to generate all other items -->
        <td style="width:577px;">
            <div style="text-align:left; padding: 5px 10px 5px 10px; margin: 0px 10px 10px 10px; width:567px; border-style:solid; border-width:1px; border-color:#578278;">
                <p class="comment_username"> User said at such a time</p>
                <p class="comment_comment"> Comment ......</p>
            </div>
        </td>
        <td style="width:577px;">
            <div style="text-align:left; padding: 5px 10px 5px 10px; margin: 0px 10px 10px 10px; width:567px; border-style:solid; border-width:1px; border-color:#578278;">
                <p class="comment_username"> User said at such a time</p>
                <p class="comment_comment"> Comment ......</p>
            </div>
        </td>
    </tr>
</table>
</div>
</div>

Here is the jsfiddle

So I want to add two buttons one either side of the div, both of which move x pixels, left or right, obviously left button left e.g. previous comment , right button right, next comment.

So in the html i’ve created I want the scroll bar to either move left or right 577px at a time, depending on the user click.

Let me know what you think guys!

Answer 1

You can use scrollLeft() to retrieve the current scroll position. Then use jQuery’s animate function to smoothly scroll the container left/right. I added two buttons with ids of left/right for this. The only difference between the functions is that one adds a distance of 200 whereas the other subtracts 200. Substitute 200 for whatever scroll amount you want. For bonus points you could detect the left position of the next comments section relative to the div container and calculate the two hundred value on the fly.

http://jsfiddle.net/EB4UC/70/

$('#left').click(function () {
    var leftPos = $('div.outer_container').scrollLeft();
    console.log(leftPos);    
    $("div.outer_container").animate({
        scrollLeft: leftPos - 200
    }, 800);
});

$('#right').click(function () {
    var leftPos = $('div.outer_container').scrollLeft();
    console.log(leftPos); 
    $("div.outer_container").animate({
        scrollLeft: leftPos + 200
    }, 800);
});