Question

I already asked same question here
after that i came up with this code :

css

div#big_container{
margin:0;
padding:30px;
width: 230px;
height: 130px;
border:1px solid #f0f0f0;
background-color: #f0f0f0;
text-align: center;
z-index:-100;
}

div#container{
overflow: hidden;
width: 207px;
background-color: #f0f0f0;
}

div#content {
position:relative;

}

button#left{
position:absolute;
top:90px;
left:2px;
z-index:1;
}

button#right{
position:absolute;
top:90px;
left:246px;
z-index:1;
}

jquery

var size =  $("#content table").find('tr').first().find('td').size();
var position = 1;

    $("#left").click( function() {
    if(position < (size / 2)) {
        $('#right').removeAttr('disabled');
        $("#content").animate({"right": "+=198px"}, "fast");
         position ++;
    }else{
       $('#left').attr("disabled", "true");
    }
    });


    $("#right").click( function() {
    if( position > 1) {
        $('#left').removeAttr('disabled');
        $("#content").animate({"right": "-=198px"}, "fast");
         position --;
    }else{
        $('#right').attr("disabled", "true");
    }
    });

html

<button id="left"><<</button>
<button id="right">>></button>

<div id="big_container">
<div id="container">
<div id="content">
<table border="0">
<tr>
<td class="img_gallery"><img src='http://i53.tinypic.com/1114gbd.gif' border='0' /></td>
<td class="img_gallery"><img src='http://i53.tinypic.com/1114gbd.gif' border='0' /></td>
<td class="img_gallery"><img src='http://i53.tinypic.com/1114gbd.gif' border='0' /></td>
<td class="img_gallery"><img src='http://i53.tinypic.com/1114gbd.gif' border='0' /></td>
<td class="img_gallery"><img src='http://i53.tinypic.com/1114gbd.gif' border='0' /></td>
<td class="img_gallery"><img src='http://i53.tinypic.com/1114gbd.gif' border='0' /></td>
</tr>
<tr>
<td>Description1</td>
<td>Description2</td>
<td>Description3</td>
<td>Description4</td>
<td>Description5</td>
<td>Description6</td>
</tr>
</table>
</div>
</div>
</div>

this is ok with me but see on the live demo

http://jsfiddle.net/bm4G4/

you see that the nxt and prv buttons disabled but not immediately after the pics set finished! you should click on the button one more time to disable it,

How can i make these buttons disable immediately?

thank you

Answer 1

This should do it

$("#left").click( function() {
if(position < (size / 2)) {
    $('#right').removeAttr('disabled');
    $("#content").animate({"right": "+=198px"}, "fast");
     position ++;
}if(position >= (size / 2)){
   $('#left').attr("disabled", "true");
}
});


$("#right").click( function() {
if( position > 1) {
    $('#left').removeAttr('disabled');
    $("#content").animate({"right": "-=198px"}, "fast");
     position --;
}if(position == 1){
    $('#right').attr("disabled", "true");
}
});