Question

I’m am trying to make my javascript/jquery slider button deactivated when it reaches the the end of the scrolling images( when the images have moved all the way to the right, the MoveRight button must be deactivated and only leave MoveLeft button active, same for the move LeftButton), can anybody help with this ? Im not sure if im using
.attr() and removeAttr() correctly. I have pasted my code below.

<script type="text/javascript">
$(document).ready(function(){

//Check width of Gallery div
var galleryWidth = $("#Gallery").innerWidth();
//Check width of GalleryItem
var NoListed = $("ul.GalleryItem li").length;
var galleryItemWidth = 1881;    

$('.MoveRight')
$('.GalleryItem').css('width', galleryItemWidth);

//Check width of Gallery div on resize
$(window).resize(function(){
    var galleryWidth = $("#Gallery").innerWidth();
  });

$('.MoveLeft').click(function() {
  $(".GalleryItem2").animate({"left": "-=350px"}, "slow");
  $(".GalleryItem3").animate({"left": "-=280px"}, "slow");
  $(".GalleryItem").animate({
    left: '-=230',
  }, "slow", function() {
    position = $(".GalleryItem").position();
    galleryItemLeft = position.left;
    if(galleryItemLeft <= galleryWidth - galleryItemWidth) {
        $('.MoveLeft').removeAttr('disabled');}
        else{
        $('.MoveLeft').attr('disabled','disabled');
        $('.MoveRight').attr('disabled','disabled');
    }
  });
});

$('.MoveRight').click(function() {
  $(".GalleryItem2").animate({"left": "+=350px"}, "slow");
  $(".GalleryItem3").animate({"left": "+=280px"}, "slow");
  $(".GalleryItem").animate({
    left: '+=230',
  }, "slow", function() {
    position = $(".GalleryItem").position();
    galleryItemLeft = position.left;
    if(galleryItemLeft >= "0") { 
        $('.MoveLeft').removeAttr('disabled');}
        else{
        $('.MoveLeft').attr('disabled','disabled');
        $('.MoveRight').attr('disabled','disabled');
    }   
  });
});

});


</script>

Answer 1

first of all, I see you doing the following:

//Check width of Gallery div on resize
$(window).resize(function(){
    var galleryWidth = $("#Gallery").innerWidth();
});

I like the fact that you keep your variables local, but the var keyword should be omitted in this case. You’ve declared galleryWidth already in the function that encloses this resize callback, so by omitting the var keyword here, the value will be assigned to the variable you use in your script, with this va keyword, you create a new galleryWidth variable, only visible in the resize callback, and therefore never used.

now for the enabling and disabling of the buttons:

you could keep a currentitem counter, and update it every time the moveright or moveleft buttons are clikced. When this counter reaches 0, you disable the moveleft button, when it reaches the number of items, you disable the moveright button, and enable them otherwise.