Fade element in/out at certain time of day

Question

I've been looking everywhere with no luck so far.

I want to fade a div in/out at set times. Not at a set time of delay from page load. For example. I want a div to fade to black when it reaches 17:00 on the local machine/server's time (depending on how it can be done) and back in at 09:00 for example. I don't know if JS/JQuery can do this on it's own, or if PHP would need to be involved.

So far I have this for the div fade, but it's using a 6 second delay, rather than triggering at a certain time of day.

$(document).ready(function() {
setTimeout(function() {
    $("div.fade-me").fadeOut("slow", function() {
        $("div.fade-me").remove();
    });
}, 6000); // 6 seconds
});

possible duplicate of [How can I obtain the local time in jQuery?](http://stackoverflow.com/questions/660927/how-can-i-obtain-the-local-time-in-jquery) — Sinister Beard, Oct 30 '14 at 08:41
setTimeout is just for setting a delay. Have you looked at [the JavaScript Date Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) or at [jQuery.now()](http://api.jquery.com/jquery.now/)? — Calvin Scherle, Oct 30 '14 at 08:41
@BFDatabaseAdmin No, since the answers do not show how to trigger it, when the time has come. — Artjom B., Oct 30 '14 at 09:28

score 0 · Answer 1 · answered Oct 30 '14 at 08:41

0

you need to get the hour of the day

e.g

var d = new Date();
var hr = d.getHours();

this returns the hour from 0 to 23

hopefully this can point you in the right direction

answered Oct 30 '14 at 08:41

user4185589

117
3

score 0 · Accepted Answer · answered Oct 30 '14 at 08:46

Here is an example on how to do it using Date object.

Sample HTML:

<div>
    <div id="timeSensitive">I appear at 10:00 until 13:00 (inclusive).</div>
    <div id="otherTime">I appear before 10:00 and after 13:00 (exclusive)</div>
</div>

And here's the JavaScript to enable it showing/hiding a div depending on time of day:

//i am only comparing hours here, you can be more granular and use minutes and seconds too.

function CheckTime()
{
    var date = new Date();
    var specialTime = date.getHours() >= 10 && date.getHours() <= 13;
    $("#timeSensitive").toggle(specialTime);
    $("#otherTime").toggle(!specialTime);

}

$(function(){
   CheckTime();
   var interval = setInterval(CheckTime, 1000); //check every second
});

Fade element in/out at certain time of day

2 Answers2