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>
Okey, to begin with remove this comma;
and add px here
then try to add this this;
right after
$('.MoveLeft').click(function() {and the same for the right one