Question

I’m trying to show/hide certain divs based on time of day, like so:

function timetheme(){

    $("#dawn,#day,#dusk,#night").hide();
    var d = new Date();
    var n = d.getHours();
    if (n > 5 && n < 8){
        $("#dawn").show();
    }
    else if (n > 8 && n < 16){
        $("#day").show();
    }
    else if (n > 16 && n < 20){
        $("#dusk").show();
    }
    else {
        $("#night").show();
    };
};

window.onload = timetheme;

I’ve tested it by altering my pc’s clock (and also at all times of day), and it works GREAT …EXCEPT for “#dusk”. If it’s between 4p and 8p, it goes straight to “#night” as if #dusk doesn’t exist.

I’ve even tried altering the others (e.g. stretch #day from 8a to 8p or even 10p) and #day works just fine. But when I try to insert #dusk (or any additional else if with a different name and parameters), it acts as if it’s not there.

I’ve searched and read through all the similar questions on here, but they always had something juuust different enough that it didn’t address my particular question.

Thanks in advance!

Answer 1

Your ranges should include the hours from the edges:

if (n >= 5 && n < 8){
    $("#dawn").show();
}
else if (n >= 8 && n < 16){
    $("#day").show();
}
else if (n >= 16 && n < 20){
    $("#dusk").show();
}
else {
    $("#night").show();
};