Fadein at certain hour or time

Question

I wonder if this is possible? For a website concept I want to make something pop out or fade in at a certain hour according to the user's computer time. I have tried looking with no avail because I don't know what kind of function would control when an effect takes place.

Any ideas? Thank you.

score 5 · Answer 1 · answered Sep 09 '11 at 04:35

5

If you know at what time to fadeIn (ahem) in, then simply calculate the delta between that time (that's supposedly in the future) and our time. Example:

var dateNow = new Date();

setTimeout(function() {
    doFadingInStuff();
}, dateWanted - dateNow);

answered Sep 09 '11 at 04:35

Zirak

38,920
13
81
92

Note that if your timeout is long (say 24 hours into the future) this code might break (and fire immediately in some browsers). See http://stackoverflow.com/questions/3468607/why-does-settimeout-break-for-large-millisecond-delay-values – Timothy Jones Sep 09 '11 at 05:23
Make sure the function self-destroys once it is executed, or set a flag to indicate that it has been executed to prevent it from executing again. – bhagyas Sep 09 '11 at 06:03

score 2 · Answer 2 · answered Sep 09 '11 at 04:37

If you get the current time and calculate the future time that you want the event to happen (thus you have an amount of elapsed time until your event should happen), you can use the setTimeout() function to schedule a function call at a precise time in the future. From that function, you would do your animation.

icktoofay · Answer 3 · 2011-09-09T04:46:40.517

Assuming you only want something to be visible during a certain hour (ie. fade in when it becomes that hour, fade out when it's no longer that hour), you could do this:

// element is assumed to be a jQuery object
var VISIBLE_HOUR=14; // 2:00 PM
function check() {
    var isHour=(new Date()).getUTCHours()==VISIBLE_HOUR;
    var isVisible=element.is(":visible");
    if(isHour!=isVisible) {
        element.fadeToggle(1000);
    }
}
// We probably don't want to check very frequently...
// You could make it more advanced by checking
// more frequently closer to the hour in which it would be visible.
setInterval(check, 30000);

score 0 · Answer 4 · answered Sep 09 '11 at 04:41

0

Check out this fiddle

Your JS

var now = new Date().toString();

    $('#fadeMe').html(now).fadeIn(9000)

answered Sep 09 '11 at 04:41

Amin Eshaq

4,034
1
17
21

mVChr · Answer 5 · 2011-09-09T04:48:09.383

var eventHour = 16, // 4:00pm

    // get the current time as a Date
    now = new Date(),

    // turn your event time into a Date
    eventDate = new Date(now.getFullYear(), 
                         now.getMonth(), 
                         now.getDate(), 
                         eventHour),

    // calculate how many MS until your event
    eventTimeMS = eventDate - now;
    dayInMS = 86400000,

    // your event
    myEvent = function() {
        alert('The time is now!');
    };

// adding 24 hours if already past event time today    
eventTimeMS = eventTimeMS < 0 ? eventTimeMS + dayInMS : eventTimeMS;

// if currently the right hour, just invoke event
if (eventHour == now.getHours()) {
    myEvent();

// otherwise start a timer to invoke your event at the appropriate time
} else {
    setTimeout(myEvent, eventTimeMS);
}

Is there any way to change the time into hours and minutes as well? I think this fits my needs, but to test it I want to be able to see the effect right away. Thanks for your answer :) — monogatari, Sep 11 '11 at 06:41
Yes, if you look up how the Date object works in Javascript you should be able to figure that out for yourself. — mVChr, Sep 11 '11 at 14:59

Robert Martin · Answer 6 · 2011-09-09T05:11:05.933

I think you want to check the time of day for the client, then fade in or out. This would be done like so:

<html>
<head>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
    $(function(){
var sunriseHour = 1;
var sunsetHour = 19;

function checkForChange() {
    var nowDate = new Date();
    var nowHour = nowDate.getHours();
    if ((nowHour >= sunriseHour) && (nowHour < sunsetHour)) {
        if (sunPosition != 'up') {
            sunPosition = 'up';
            $('#theSun').fadeIn('slow');
        }
    } else {
        if (sunPosition != 'down') {
            sunPosition = 'down';
            $('#theSun').fadeOut('slow');
        }
    }
}

var nowDate = new Date();
var nowHour = nowDate.getHours();
if ((nowHour >= sunriseHour) && (nowHour < sunsetHour)) {
    $('#theSun').show();
    sunPosition = 'up';
} else {
    $('#theSun').hide();
    sunPosition = 'down';
}

setTimeout(checkForChange, 1000);

    });
  </script>
</head>

<body>
  <div id="theSun" style="background: yellow; width: 300px; height: 300px; display: none;">
  This box is the sun
  </div>
</body>
</html>

Fadein at certain hour or time

6 Answers6