Dave, I need your help. I’m updating my Web site for The David Lawrence Show and would like to display ‘ON THE AIR’ between 7p and 10p PT (3a to 6a GMT) Monday through Saturday, and ‘OFF THE AIR’ the rest of the time. How do I do this? Later, I can easily replace this displayed text with an image tag once I find an on-air light graphic that doesn’t look like it’s from 1943. 🙂
This is a classic situation where you could use a number of different paths to attain the same goal, ranging from a CGI solution to a small server-side include, to a PHP script or, the solution I’ll demonstrate here, a JavaScript client-side snippet.
Each has its strengths and weaknesses, and for JavaScript the risk is that some percentage of your viewers will probably have JavaScript disabled in their browsers. Assuming you can live with only about 95% of your visitors knowing if you’re on the air at that moment, this should work reasonably well, and it’s really easy to add without making any changes on the server.
There’s one other potential hiccup in that since JavaScript is client-side, and since it’s working with time, there’s no way for the script to know if the visitor has their computer clock set wrong. Ah well. Let’s assume that’s not a big crisis either, shall we?
The first part of this script simply grabs the current time of day then extracts the Universal Time Coordinated (UTC, this used to be called Greenwich Mean Time and then Zulu Time) values for day of week and hour of day. Three simple lines:
var thedate = new Date(); var dayofweek = thedate.getUTCDay(); var hourofday = thedate.getUTCHours();
I’ll also create a simple function that lets you add conditional HTML content anywhere on the page by simply testing if (onAir()):
function onAir() { // return TRUE if it's Mon through Sat, 3a-6a UTC if (dayofweek != 0 && ((hourofday > 2 && hourofday < 7))) { return true; } return false; }
To show how this works, here’s an entire HTML page that includes this JavaScript and an example of how to use this new function elsewhere in the page:
<head> <script type="text/javascript"> var thedate = new Date(); var dayofweek = thedate.getUTCDay(); var hourofday = thedate.getUTCHours(); function onAir() { // return TRUE if it's Mon through Sat, 3a-6a UTC if (dayofweek != 0 && ((hourofday > 2 && hourofday < 7))) { return true; } return false; } </script> </head><body> <h1>The David Lawrence Show!</h1> <script type="text/javascript"> if (onAir()) { document.write("<h2>ON THE AIR</h2>"); } else { document.write("<h2>OFF THE AIR</h2>"); } </script> <p> If you want to learn more about David's show, please visit <a href="http://thedavidlawrenceshow.com/">The David Lawrence Show</a> </p> </body> </html>
I’ll leave the rest of it in your capable hands, David, and encourage everyone else to pop over to your sites and learn about both of your great radio programs The David Lawrence Show and Online Tonight.
what about changing the homepage to another page depending on the season?
ie index2.html in winter, index3.html in spring, index4.html in summer?
Same basic idea, Kev. Just figure out the element of the date that you want (probably month?) and figure out the series of conditional tests needed to ascertain what season it is. If you want to get fancy, remember seasons switch on the 21st or 22nd of every third month, so it’s slightly tricker than it looks. 🙂
I am trying to use a simple CMS website called Yola to publish a website, but content is highly defined by insertable modules. Is there an HTML condition I can insert to set the date when that content appears?
Thanks very much
Doug
Hey will this work if I need it exact to the minute not on the hour? like if i need it to be true at 6:37AM and false at 7:35PM. and can I have multiple trues and falses if they are assigned to different functions. So have it true at 6:37 and change the text then have it true again at 7:10 and change a different text.
Thanks
hey dave i was searching for something else and i didnot found it. actually i want to add time in my site that runs and should shows exact time every minutes and every seconds. plz help me out
hey dave i was searching for something else and i didnot found it. actually i want to add time in my site that runs and should shows exact time every minutes and every seconds. plz help me out
How to change html contents and get it executed by the web server?
Please i need an HTML-based javascript for interchanging few texts on my web-page.
My new website is used for evangelical purposes, hence i update the summary of the day’s sermon on the home-page.
I’m tired of changing it manually, can a jscript help? Thanks
Hi Dave,
Is there any simple way to be able to specify to half hour intervals?
I tried adding
var minuteofday = thedate.getUTCMinutes();
to the top and calling it out with
((hourofday > 0 && hourofday 0 && minuteofday < 30))
but it not working and I am not very fluent with javascript. Any help would be appreciated.
Also what to change the day of week to to get it to be the same every day.
Hi Dave,
I need a script to show the DJ who’s on air now. This should take the server time, so that people who listen on air in other countries will see the same DJ that I see here.
I.e. from 6 am – 10 am the breakfast show. from 10 – 2 the next show…goes on like that for the whole week. and repeats again next week
My pages is in html.
Hello great script, but how do i make it show a particular graphic instead of saying ‘on air’ eg, I want to add a graphic on a web page that changes as per certain times of the day to a different graphic in the same position and will change back once the time changes..
Paul
Perfect! Thanks this HTML example does exactly what I needed!
Erny
I need a script based on the Sabbath times- friday sundown to sat sundown, that will forward to a certian page I specify to say temp closed due to sabbath.
Here are the times for sundown in my area.
7 Oct 6:27
12 Oct 6:17
14 Oct 6:14
17 Oct 6:09
21 Oct 6:02
24 Oct 5:57
28 Oct 5:51
4 Nov 4:41
11 Nov 4:32
18 Nov 4:25
25 Nov 4:19
2 Dec 4:16
9 Dec 4:14
16 Dec 4:15
23 Dec 4:18
30 Dec 4:22
6 Jan 4:29
13 Jan 4:37
20 Jan 4:46
27 Jan 4:56
3 Feb 5:06
10 Feb 5:16
17 Feb 5:26
24 Feb 5:36
3 Mar 5:45
10 Mar 5:54
17 Mar 6:04
24 Mar 6:13
31 Mar 6:22
7 Apr 7:30
12 Apr 7:37
14 Apr 7:39
18 Apr 7:44
21 Apr 7:48
28 Apr 7:57
5 May 8:05
12 May 8:14
19 May 8:22
26 May 8:29
1 Jun 8:35
2 Jun 8:36
9 Jun 8:41
16 Jun 8:45
23 Jun 8:46
30 Jun 8:47
7 Jul 8:45
14 Jul 8:41
21 Jul 8:35
28 Jul 8:28
4 Aug 8:20
11 Aug 8:10
18 Aug 7:59
25 Aug 7:47
1 Sep 7:34
8 Sep 7:21
15 Sep 7:08
22 Sep 6:55
Try ZOPE.
It has based functions that allow you to tell time…
The PHP version is pretty similar. It makes use of PHP’s <a href=”http://www.php.net/manual/en/function.date.php”>date</a> command.
First, here’s the onAir() function in PHP:
<?php
//place this somewhere in your web page before the “On the air” section below
function onAir() {
//PHP’s time() function adds the time zone, so adjust for that
//(see comments at bottom of http://www.php.net/manual/en/function.time.php )
$gmtime=time() – date(‘Z’);
//if today is Sunday, return false
if(date(‘w’,$gmtime)==0) {
return FALSE;
}
$hour=date(‘H’,$gmtime);
if($hour> 2 AND $hour< 7) {
return TRUE;
}
return FALSE;
}
?>
Now, you just use the function above to decide whether to display “On Air” or “Off the Air.”
<?php
if (onAir()) {
?>
<h2>ON THE AIR</h2>
<?php
} else {
?>
<h2>OFF THE AIR</h2>
<?php
}
?>
Dave, how could one accomplish this using PHP?