CODEWITHSUNDEEP
jquerybutton
Pedro
Pedro

Reputation: 575

Disabling buttons

I need help in disabling two buttons (right/left) in a slideshow when they reach their respective boundaries - fiddle; changing the background-color and the cursor type to default would be enough. This is the jQuery code:

var menuItem_place = 0;
var menuItem_position = 0;
var menuItem_limit = parseInt($('.menuItem').length) - 1;

$('.menuItem:first .content').css({margin: 0, height: '100%', lineHeight: '99px'})

$('#rightBtn').on('click', function(){
    if (menuItem_place < menuItem_limit) {
        menuItem_place++;
    }
    menu_animate();
});

$('#leftBtn').on('click', function(){
    if (menuItem_place > 0){
        menuItem_place--;
    }
    menu_animate();
});

var menuitems = $('.menuItem');
var contents = $('.content', menuitems);

menuitems.click(function(){
    menuItem_place = $(this).index();
    menu_animate()
});

function menu_animate() {
    contents.animate({margin: 20, height: '64%', lineHeight: '63px'}, 300);
    $(contents.get(menuItem_place)).stop().animate({margin: 0, height: '100%', lineHeight: '99px'}, 100)
    menuItem_position = 0 - (menuItem_place * 200);
    $('#menuContainer').stop().animate({left: menuItem_position + 'px'}, 300);
}

The code is not mine and it's beyond my ability to do what I need. Any help would be appreciated. Thanx.

Pedro

Upvotes: 0

Views: 160

Answers (2)

j08691
j08691

Reputation: 208002

Just check menuItem_place to see if it's zero (first element) or equal to $('.menuItem').length - 1 (last element). I created a class (.disabled) that is applied or removed based on these conditions.

jsFiddle example

var menuItem_place = 0;
var menuItem_position = 0;
var menuItem_limit = parseInt($('.menuItem').length) - 1;
if (menuItem_place == 0) $('#leftBtn').addClass('disabled'); // <-- NEW
$('.menuItem:first .content').css({
    margin: 0,
    height: '100%',
    lineHeight: '99px'
})

$('#rightBtn').on('click', function () {
    if (menuItem_place < menuItem_limit) {
        menuItem_place++;
    }
    menu_animate();
});

$('#leftBtn').on('click', function () {
    if (menuItem_place > 0) {
        menuItem_place--;
    }
    menu_animate();
});

var menuitems = $('.menuItem');
var contents = $('.content', menuitems);

menuitems.click(function () {
    menuItem_place = $(this).index();
    menu_animate()
});

function menu_animate() {
    contents.animate({
        margin: 20,
        height: '64%',
        lineHeight: '63px'
    }, 300);
    $(contents.get(menuItem_place)).stop().animate({
        margin: 0,
        height: '100%',
        lineHeight: '99px'
    }, 100)
    menuItem_position = 0 - (menuItem_place * 200);
    $('#menuContainer').stop().animate({
        left: menuItem_position + 'px'
    }, 300);
    $('#rightBtn,#leftBtn').removeClass('disabled'); // <-- NEW
    if ($('.menuItem').length - 1 == menuItem_place) $('#rightBtn').addClass('disabled'); // <-- NEW
    if (menuItem_place == 0) $('#leftBtn').addClass('disabled');  // <-- NEW
}

Upvotes: 1

Andrew
Andrew

Reputation: 1880

I am not sure what you mean by disable 2 buttons, but I can only assume you mean the left and right buttons.

I have updated your jsfiddle code, please see below.

http://jsfiddle.net/xkUYm/1/

All I did was to tell them to display:none in the css

OR

you could remove them from the HTML all together.

Upvotes: 0

Related Questions