PDA

View Full Version : 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:


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


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
This script goes by the clock on your computer.
The numbers in the array below are the titles:


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

mburt
08-26-2006, 09:52 PM
You have to create a div (preferably, but you could use span) and id it "news"


Put it in your body

<div id="news"></div>

psycho_circus
08-28-2006, 03:51 AM
Could this script be used to show text content rather than an image? What I am looking for is something to drop into my existing site (html/css base) that will allow a list of dates (shows for my band) to be updated automatically once a show passes. So once a show is done (and the date passes) the date drops off the page, leaving the upcoming shows on the site.

I think this script would work.....anyone care to give me some insight?

Jack Numick
11-21-2006, 05:33 AM
I was searching for a script like this and found this one most useful.

I wanted the image at the bottom on my site to change form sunrise to sunset and back again.

It worked great with Firefox. I'm using the original script from the top of this post.

I've run into two problems, however.

First: During the times between 12:00am to 12:59am, no image would show. I fixed this, however, by filling in the first array with an image, although the original poster said you could not.

Second: This I cannot figure out. I have everything working fine in Firefox but when I test the sight out on IE6 or IE7, I get no image at all. I even reverted to the original script and kept the first array blank.

I cannot, find any other script that works as well as this one but it just does not do the job in IE.

I'm not sure if the revision that was posted as an external .js file would work because I do not know how to use it!

I'm new to all this so any help would be appreciated.

Here the script exactly as I have it:

<head>
<script language="JavaScript" type="text/JavaScript">
<!--
var titles = new Array(
"<img src='images/shared/Twilight_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Night_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Night_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Night_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Night_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Sunrise_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Sunrise_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Sunrise_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Sunrise_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Morning_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Morning_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Morning_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Morning_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/AMO_Layout_Bottom_Shiny_Tan.jpg'>",
"<img src='images/shared/AMO_Layout_Bottom_Shiny_Tan.jpg'>",
"<img src='images/shared/AMO_Layout_Bottom_Shiny_Tan.jpg'>",
"<img src='images/shared/AMO_Layout_Bottom_Shiny_Tan.jpg'>",
"<img src='images/shared/Sunset_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Sunset_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Sunset_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Sunset_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Twilight_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Twilight_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Twilight_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Twilight_AMO_Layout_Bottom.jpg'>")
onload=function dispdates() {
var today = new Date()
var hours = today.getHours()
news.innerHTML=titles[hours]
setTimeout("dispdates()",1000)
}
//-->
</script>
</head>

<body>
<div align=center id="news"></div>
</body>

jackalex
11-06-2009, 12:12 AM
I was searching for a script like this and found this one most useful.

I wanted the image at the bottom on my site to change form sunrise to sunset and back again.

It worked great with Firefox. I'm using the original script from the top of this post.

I've run into two problems, however.

First: During the times between 12:00am to 12:59am, no image would show. I fixed this, however, by filling in the first array with an image, although the original poster said you could not.

Second: This I cannot figure out. I have everything working fine in Firefox but when I test the sight out on IE6 or IE7, I get no image at all. I even reverted to the original script and kept the first array blank.

I cannot, find any other script that works as well as this one but it just does not do the job in IE.

I'm not sure if the revision that was posted as an external .js file would work because I do not know how to use it!

I'm new to all this so any help would be appreciated.

Here the script exactly as I have it:

<head>
<script language="JavaScript" type="text/JavaScript">
<!--
var titles = new Array(""
"<img src='images/shared/Twilight_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Night_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Night_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Night_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Night_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Sunrise_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Sunrise_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Sunrise_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Sunrise_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Morning_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Morning_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Morning_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Morning_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/AMO_Layout_Bottom_Shiny_Tan.jpg'>",
"<img src='images/shared/AMO_Layout_Bottom_Shiny_Tan.jpg'>",
"<img src='images/shared/AMO_Layout_Bottom_Shiny_Tan.jpg'>",
"<img src='images/shared/AMO_Layout_Bottom_Shiny_Tan.jpg'>",
"<img src='images/shared/Sunset_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Sunset_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Sunset_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Sunset_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Twilight_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Twilight_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Twilight_AMO_Layout_Bottom.jpg'>",
"<img src='images/shared/Twilight_AMO_Layout_Bottom.jpg'>",)
onload=function dispdates() {
var today = new Date()
var hours = today.getHours()
news.innerHTML=titles[hours+1]
setTimeout("dispdates()",1000)
}
//-->
</script>
</head>

<body>
<div align=center id="news"></div>
</body>


Hi im using this script and have found the bits highlighted work for me!
You need 25 hours/ lines and change the news.innerHTML to plus 1.
Dont ask me how it works but it does on FF, IE & Chrome.

Hope this helps!