Hide a div container based on timestamp

Question

I would like to display an alert banner (div) on a page for 30 minutes after a piece of content was created. After 30 minutes, the banner should not display anymore. This is to let a user know that a video takes time to transcode, so may be unavailable until then.

The idea:

var timeStamp = format_date(var node.created, 'custom', 'M j, Y g:i A');
var currentTime = new Date();

if {
    currenTime < timeStamp + (30_minutes) = document.getElementById(alert_banner).style.display = 'block';
}
else {
    currentTime > timeStamp + (30_minutes) = document.getElementById(alert_banner).style.display = 'none';
}

Answer 1

You can try it

var time = 1000 * 60 * 30 //milisecond * second * minute
setTimeout(function(){
    // Your function here e.i
    document.getElementById(alert_banner).style.display = 'none';
}, time)

Answer 2

As the headlikearock mentioned, the timing intervals are probably your best bet:

setInterval(function(){document.getElementById(alert_banner).style.display = 'none';},1800000);

Place that in your on load JS code, and it should fire off the inline defined JS function 30 seconds after that statement is run.

Here is an example with a disappearing div after 5 seconds.

Answer 3

You can use the setTimeout method (http://www.w3schools.com/js/js_timing.asp) to hide the div after 30 minutes.