Question

I have this code

css:

div#container{
overflow: hidden;
width: 331px;
}

div#content {
position:relative;
}

jquery:

$("#left").click(function(){
$("#content").animate({"right": "+=328px"}, "slow");
});

$("#right").click(function(){
$("#content").animate({"right": "-=328px"}, "slow");
});

HTML:

<button id="left"><<</button>
<button id="right">>></button>
<div id="container">
<div id="content">
<table border="0">
<tr>
<td><img src="images/img1.gif"></td>
<td><img src="images/img2.gif"></td>
<td><img src="images/img3.gif"></td>
<td><img src="images/img4.gif"></td>
</tr>
<tr>
<td>Description1</td>
<td>Description2</td>
<td>Description3</td>
<td>Description4</td>
</tr>
</table>

when i click for example prv button 15 times the div move 328px every time!
my question is how to know the last postion that the gallery should stop moving?

thank you

Answer 1

I don’t like using tables for that… Divs make your code much more fluid, and would allow an elegant solution: is(‘:last-child’) on active div

But since you’re doing it with table, I can think of two ways of doing this

One is using a counter, then checking it against number of columns of table. If displaying more than one column per step, then it will be total number of columns / visible columns:

$(function(){
    var position = 1;

    $("#left").click(function(){
    var size =  $("#content table").find('tr').first().find('td').size();

        if(position < (size / 2) ) {
            $("#content").animate({"right": "+=198px"}, "slow");
            position ++;
        }
    });

    $("#right").click(function(){
        if(  position > 1) {
            $("#content").animate({"right": "-=198px"}, "slow");
             position --;
        }
    });
});

Fiddle: http://jsfiddle.net/9sYWK/5/

The other solution consists in calculating how many times #content has moved. You can get it by using $("#content").css('right');. Since you know you always move your div in 328px steps, you can divide it by 328 to get how many times it was clicked