Jquery if visible conditional not working

Question

Hey,

I have a page going here that uses jQuery: http://treethink.com/services What I am trying to do is, if a slide or sub-page is shown in there, change the background colour and colour of the button.

To do this I tried saying, if a certain div is shown, the background colour of a certain button changes. However, you can see there that it isn't working properly, it is changing the colour for the web one but not removing the colour change and adding a colour change on a different button when you change pages.

Here is the overall code:

/* Hide all pages except for web */

$("#services #web-block").show();
$("#services #print-block").hide();
$("#services #branding-block").hide();

/* When a button is clicked, show that page and hide others */

$("#services #web-button").click(function() {

    $("#services #web-block").show();
    $("#services #print-block").hide();
    $("#services #branding-block").hide();

});

$("#services #print-button").click(function() {

    $("#services #print-block").show();
    $("#services #web-block").hide();
    $("#services #branding-block").hide();

});

$("#services #branding-button").click(function() {

    $("#services #branding-block").show();
    $("#services #web-block").hide();
    $("#services #print-block").hide();

}); 

/* If buttons are active, disable hovering */

if ($('#services #web-block').is(":visible")) { 

    $("#services #web-button").css("background", "#444444");
    $("#services #web-button").css("color", "#999999");

}

if ($('#services #print-block').is(":visible")) { 

    $("#services #print-button").css("background", "#444444");
    $("#services #print-button").css("color", "#999999");

}

if ($('#services #branding-block').is(":visible")) { 

    $("#services #branding-button").css("background", "#444444");
    $("#services #branding-button").css("color", "#999999");

}

Thanks,

Wade

Answer 1

Your if statements are only being executed once. When you switch pages, the if statements are not run again, so nothing changes.

You need to put the if statements in a function, then call the function both immediately and after switching pages.

---

By the way, you can set multiple properties with a single css call, like this:

$("#services #print-button").css({
    background: "#444444",
    color: "#999999"
});

Answer 2

Thanks SLaks, your suggestion worked but for some reason it won't let me reset the css hovers. When the div's button goes back to not being active it won't hover still.

/* Hide all pages except for web */

$("#services #web-block").show();
$("#services #print-block").hide();
$("#services #branding-block").hide();
activeButton();

/* When a button is clicked, show that page and hide others */

$("#services #web-button").click(function() {

    $("#services #web-block").show();
    $("#services #print-block").hide();
    $("#services #branding-block").hide();
    activeButton();

});

$("#services #print-button").click(function() {

    $("#services #print-block").show();
    $("#services #web-block").hide();
    $("#services #branding-block").hide();
    activeButton();

});

$("#services #branding-button").click(function() {

    $("#services #branding-block").show();
    $("#services #web-block").hide();
    $("#services #print-block").hide();
    activeButton();

}); 

/* If buttons are active, disable hovering */

function activeButton() {

    if ($('#services #web-block').is(":visible")) { 

        $("#services #web-button").css({background: "#444444", color: "#999999"});


    } else if ($('#services #web-block').is(":hidden")) { 

        $("#services #web-button").css({background: "#000000", color: "#999999"});
        $("#services #web-button:hover").css({background: "#666666", color: "#ffffff"});

    } 

    if ($('#services #print-block').is(":visible")) { 

        $("#services #print-button").css({background: "#444444", color: "#999999"});

    } else if ($('#services #print-block').is(":hidden")) { 

        $("#services #print-button").css({background: "#000000", color: "#999999"});
        $("#services #print-button:hover").css({background: "#666666", color: "#ffffff"});

    }

    if ($('#services #branding-block').is(":visible")) { 

        $("#services #branding-button").css({background: "#444444", color: "#999999"});

    } else if ($('#services #branding-block').is(":hidden")) { 

        $("#services #branding-button").css({background: "#000000", color: "#999999"});
        $("#services #branding-button:hover").css({background: "#666666", color: "#ffffff"});

    }

}

Answer 3

Sorry that this is slightly unrelated, but you could save a lot by simplifying your code:

Your version:

if ($('#services #web-block').is(":visible")) { 

        $("#services #web-button").css("background", "#444444");
        $("#services #web-button").css("color", "#999999");

    } else if ($('#services #web-block').is(":hidden")) { 

        $("#services #web-button").css("background", "#000000");
        $("#services #web-button").css("color", "#999999");
        $("#services #web-button:hover").css("background", "#666666");
        $("#services #web-button:hover").css("color", "#ffffff");

    } 

Simpler version:

if ($('#services #web-block').is(":visible")) { 
        $("#services #web-button").css({"background":"#444444"), "color":"#999999"});
    } else { 
        $("#services #web-button").css({ "background":"#000000", "color":"#999999" });
        $("#services #web-button:hover").css({ "background":"#666666", "color":"#ffffff" });
    } 

They should work the same. That's all.