If else statement for changing color in css

Question

http://jsfiddle.net/alexruff/Vrxv9/3/

I have 2 buttons, one for vimeo one for youtube. Those buttons toggle the 2 videos with a right to left movement.

I want to highlight (change color) the youtube button when the youtube video is shown (marginLeft: '0'), and the vimeo button when the vimeo video is shown (marginLeft: '-1000px').

I tried using an if else statement but than nothing worked anymore.

Thanks for help.

JQuery:

$(document).ready(function(){

$('#vimeo_player_button').click(function(){
    $('#youtube_player').animate({
        marginLeft: '-1000px'
    });
});

$('#youtube_player_button').click(function(){
    $('#youtube_player').animate({
        marginLeft: '0'
    });
});    

var youtube = $('#youtube_player').animate({marginLeft: '0'});

if ('#youtube_player' = youtube) {
    $('#youtube_player_button').css('background-color': 'rgb(0, 0, 250)')
} else{
    $('#vimeo_player_button').css('background-color': 'rgb(0, 0, 250)')
};

});

Answer 1

My suggestion is to add a class active to your css:

.active {
    background-color: rgb(0, 0, 250);        
}

Then add activeclass to the clicked button as well as removing this class from other button:

$('#vimeo_player_button').click(function(){
    $('#youtube_player').animate({
        marginLeft: '-1000px'
    });
    $('.active').removeClass('active');
    $(this).addClass('active');
});

$('#youtube_player_button').click(function(){
    $('#youtube_player').animate({
        marginLeft: '0'
    });
    $('.active').removeClass('active');
    $(this).addClass('active');
});    

Updated Fiddle

Answer 2

You used the assignment operator, when you meant to use the comparison operator, and comparing a selector as a string to a jQuery object makes no sense:

if ('#youtube_player' = youtube) {

Also, because you are only changing one CSS property with jQuery you separate it with , instead of :

if ('#youtube_player' = youtube) {
    $('#youtube_player_button').css('background-color', 'rgb(0, 0, 250)')
} else{
    $('#vimeo_player_button').css('background-color', 'rgb(0, 0, 250)')
};

Lastly, you should do what A. Wolff said in the comments and just have a class that you add when you click the buttons.

Answer 3

look at this jsfiddle http://jsfiddle.net/Vrxv9/10/

what i have done here is

• added active class on youtube button
• applied active class on selected button
• removed hove effect ( optional)

Code

$(document).ready(function(){

    // intialization
     $('#youtube_player_button').addClass("active");

    $('#vimeo_player_button').click(function(){
        $('#youtube_player').animate({
            marginLeft: '-1000px'
        },1000,function(){
            $('#youtube_player_button').removeClass("active");
            $('#vimeo_player_button').removeClass("active");
            $('#vimeo_player_button').addClass("active");
        }); 

    });

    $('#youtube_player_button').click(function(){
        $('#youtube_player').animate({
            marginLeft: '0'
       },1000,function(){
            $('#vimeo_player_button').removeClass("active");
            $('#vimeo_player_button').removeClass("active");
            $('#youtube_player_button').addClass("active");
        });
    });    

});