0

I'm preparing simple digital signage script which require time scheduling. I was able to do it with javascript with refreshing every 15 minutes. But my question is, how can I measure the time and change the content on exact hour without refreshing the page?

My page looks like this:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="900" >
<title>Signage</title>
<style>
body {
   margin: 0;
   padding: 0;
}
</style>
<script>
function src() { 
    var Day = "day.html";
    var Lunch = "lunch.html";
    var Evening = "evening.html";
    var Src;

    var hour = new Date().getHours();
    var day = new Date().getDay();

    if (hour >= 10 && hour <= 13 && day >= 1 && day <=5) {
        Src = Lunch;    
    }       

    else if (hour >= 7 && hour <= 19)   {
        Src = Day;
            }

    else  {
        Src = Evening;
            }

document.getElementById('signage').src = Src; 

}

</script>

</head>
<body onLoad="src();">
<iframe scrolling="no" id="signage" src="about:blank" width="1920" height="1080" frameborder="0"></iframe>

</body>
</html>
Joe
  • 3
  • 3
  • Do you want your page to refresh every X minutes ? And depending on the time, it will load day/lunch/evening ? – Gregoire Aug 31 '16 at 10:25
  • I don't want to refresh the page at all... I just want to change the content on exact time. – Joe Aug 31 '16 at 11:12
  • But what is "exact time" ? Every second ? So that when it's 6h59 it's evening and then 7h it changed to day ? – Gregoire Aug 31 '16 at 11:20
  • 1
    For example: Lunch time is between 11am to 2pm. So at exact 11am the content will change to lunch and after exact at 2pm change it back to day offer. The same with evening. – Joe Aug 31 '16 at 11:23
  • A question, for the lunch you use `day >= 1 && day <=5`, why ? Does it means that whenever it's the weekend, the script will only be Day/Evening ? – Gregoire Aug 31 '16 at 12:38
  • Found this: http://stackoverflow.com/questions/1217929/how-to-automatically-reload-a-web-page-at-a-certain-time][1] – Joe Aug 31 '16 at 12:38
  • Yes... Over weekend is no lunch offer active. – Joe Aug 31 '16 at 18:50

2 Answers2

2

If you want your page to refresh automatically after a certain time period, you can use javascript's setInterval() function.

setInterval(function() { window.location.reload(); } , timePeriod );
Akash Tomar
  • 970
  • 1
  • 11
  • 23
  • I don't need this.... it's refreshing it self every 15 minutes. You can see it in meta tag. – Joe Aug 31 '16 at 11:33
  • What you are looking for is AJAX. But i am guessing you have not hosted this website anywhere.If you run this on a local server you will be able to achieve this very easily with jqeury. Due to security reasons you cannot use AJAX to fetch files from file system directly. – Akash Tomar Aug 31 '16 at 11:45
  • Exactly... I just need to change the content. The thing is... if the content is some video... it can't be refreshed every x minutes. So I was hoping for something to check the time in background and when it comes to the change hour, it will do the content change. – Joe Aug 31 '16 at 11:45
  • I am running it on local pc. No problem with security. – Joe Aug 31 '16 at 11:46
  • No the problem is not that you can, problem is you cannot. It is not allowed for the javascript to access the file system. – Akash Tomar Aug 31 '16 at 11:49
  • You may use apache server to host your files locally using php. It is very easy to setup. You can look up the web and get it done in no time. – Akash Tomar Aug 31 '16 at 11:51
  • I know, I could do it in php with localhost... but the idea was make it simple as possible. – Joe Aug 31 '16 at 11:53
  • 1
    check this one: http://stackoverflow.com/questions/6923707/using-ajax-to-read-local-files – Akash Tomar Aug 31 '16 at 11:56
  • SetInterval is deprecated because of its behaviour, you'd better use setTimeout – Gregoire Aug 31 '16 at 12:30
  • http://stackoverflow.com/questions/1217929/how-to-automatically-reload-a-web-page-at-a-certain-time – Joe Aug 31 '16 at 12:39
0

Try to add this code in head

<script> document.addEventListener("DOMContentLoaded", setTimeout(function() {src();}, 5000 /*5 sec*/)); </script>
Krzysztof Bargieł
  • 143
  • 8