Change Content Depending On Time Of Day?

**matt blank** · 08-21-2006, 06:48 PM

Hiya guys,

I know the iFrame javascript that can display a different page depending on the day, but what I want is something that can change hourly.

I'm creating a website for a radio station and want a 'now on air' picture which will change on the hour to show a picture of the current presenter. Each day will have different presenters at different times.

How can this be done?

Thanks!
Matt

**mburt** · 08-21-2006, 06:58 PM

This script goes by the clock on your computer.
The numbers in the array below are the titles:

Code:

<html>
<head>
<script type="text/javascript">
var titles = new Array("","1","2","3","4","5",
"6","7","8","9","10","11"," 12"," 13","14",
"15","16","17","18","19","20","21","22","23","24")
onload=function dispdates() {
var today = new Date()
var hours = today.getHours()
news.innerHTML=titles[hours]
setTimeout("dispdates()",1000)
}
</script>
</head>
<body>
<div id="news"></div>
</body>
</html>

The red indicates the titles array

**matt blank** · 08-21-2006, 07:06 PM

Thanks!

So doI just put something like: images/presenter1.jpg inside the "" where the numbers are?

Matt

**mburt** · 08-21-2006, 07:08 PM

Nope. You have to use the entire HTML code:

Code:

var titles = new Array("","<img src='images/presenter1.jpg'">)

Note: You have to use single-quotes.
Also: You always have to leave the first parameter blank.

**matt blank** · 08-21-2006, 07:25 PM

Cool! Thanks so much

**matt blank** · 08-21-2006, 11:50 PM

Following up to this.

Lets say I now wanted the pictures to change going by the proper time (i.e. on a server) rather than the users computer.

How can I do this??

Thanks!
Matt

**mburt** · 08-22-2006, 12:50 AM

Hmm... I'm not really sure about that. Maybe you could post this in the PHP section.

**terkini** · 08-25-2006, 09:56 PM

Originally Posted by mburt

This script goes by the clock on your computer.
The numbers in the array below are the titles:

Code:

<html>
<head>
<script type="text/javascript">
var titles = new Array("","1","2","3","4","5",
"6","7","8","9","10","11"," 12"," 13","14",
"15","16","17","18","19","20","21","22","23","24")
onload=function dispdates() {
var today = new Date()
var hours = today.getHours()
news.innerHTML=titles[hours]
setTimeout("dispdates()",1000)
}
</script>
</head>
<body>
<div id="news"></div>
</body>
</html>

The red indicates the titles array

I noticed that this script uses the onLoad function. My questions are:
(a). Can i put this script in external javascript files, and if yes, how do I call it up?
(b). If there are other javascripts on the page that uses the same onLoad function, how do i combine the "dispdates" with other the other functions?

**Twey** · 08-25-2006, 10:18 PM

Code:

var serverTimeOffset = 0; // Offset between UTC/GMT and the server time (hours)
var newsElementID = "news"; // ID of the "news" element

var showTitles = [
  "0000 - 0059 news",
  "0100 - 0159 news",
  "0200 - 0259 news",
  "0300 - 0359 news"
  // Add more...
];

function addEvent(el, ev, f) {
  if(el.addEventListener)
    el.addEventListener(ev, f, false);
  else if(el.attachEvent)
    el.attachEvent("on" + ev, f);
  else
    el['on' + ev] = f;
}

addEvent(window, "load", function() {
  var newsElement = document.getElementById(newsElementID), d;
  window.setInterval(
    function() {
      (d = new Date()).setTime(d.getTime() + (3600000 * serverTimeOffset));
      newsElement.innerHTML = showTitles[d.getUTCHours()] || "Nothing.";
    },
  1000);
});

**terkini** · 08-26-2006, 07:47 PM

Originally Posted by Twey

Code:

var serverTimeOffset = 0; // Offset between UTC/GMT and the server time (hours)
var newsElementID = "news"; // ID of the "news" element

var showTitles = [
  "0000 - 0059 news",
  "0100 - 0159 news",
  "0200 - 0259 news",
  "0300 - 0359 news"
  // Add more...
];

function addEvent(el, ev, f) {
  if(el.addEventListener)
    el.addEventListener(ev, f, false);
  else if(el.attachEvent)
    el.attachEvent("on" + ev, f);
  else
    el['on' + ev] = f;
}

addEvent(window, "load", function() {
  var newsElement = document.getElementById(newsElementID), d;
  window.setInterval(
    function() {
      (d = new Date()).setTime(d.getTime() + (3600000 * serverTimeOffset));
      newsElement.innerHTML = showTitles[d.getUTCHours()] || "Nothing.";
    },
  1000);
});

I copied the scripts above and saved it as msg.js in an external js file. Later
i tried to called it with the following javascript:

<script src="msg.js" type="text/javascript"></script>

Nothing appeared on the page, but when I click at the little yellow triangle at the bottom left of the browser, the message says that "newsElement is null or not an object".
what could be the problem?

Thread: Change Content Depending On Time Of Day?

Thread Tools

Search Thread

Change Content Depending On Time Of Day?

Bookmarks

Bookmarks

Posting Permissions