Industry guru Dave Taylor answers free tech support questions about a wide variety of business and technical topics, including blogging, Google AdSense, MySpace, Sony PSP, Apple iPod, Mp3 players, management, Linux, SEO, Mac OS X, Facebook, Twitter, LinkedIn and Microsoft Windows.

Still befuddled? Get immediate live tech support with SupportSpace!

Can I change my Web page based on time of day?

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. :-)

Dave's Answer:

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.

Help others find this article at Del.icio.us, Digg, Netscape, Reddit, and Simpy.

Categorized: CGI Scripts and Web Site Programming (Article 3893)
Tagged:
Previous: How do the costs of publishing a book break down?
Next: How do I create custom email filters in MSN Hotmail?

Subscribe!

Never miss another useful Q&A article again! Subscribe to AskDaveTaylor with Google Reader.

Comments

Dave, how could one accomplish this using PHP?

Posted by: Kevin Walter at February 20, 2005 1:30 AM

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
}
?>

Posted by: Derek Scruggs at February 20, 2005 4:50 PM

Try ZOPE.
It has based functions that allow you to tell time...

Posted by: Ben Jolitz at March 13, 2005 10:58 PM

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

Posted by: Thomas Strand at February 21, 2006 4:09 PM

Perfect! Thanks this HTML example does exactly what I needed!
Erny

Posted by: Vertaalbureau at April 19, 2007 1:04 AM

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

Posted by: Paul at December 14, 2007 3:44 AM

I have a lot to say, but ...

I have a lot to say, and questions of my own for that matter, but most of all I'd like to say thank you for all your efforts on this Web site by buying you a chai!

I do have a comment, now that you mention it!