Need Help with Time of Day Script

@storm71852May 26.2007

Hello,

I work for a radio station and would like to have a javascript on our website that changes by the hour so people will know what DJ/show is on. This script would have to include different schedules for each day as well.

This would work similar to the “Time of Day” script but I have no idea how to change that to make it do what I want.

If somebody knows how to code something like that I would like it to have the 1st line with a little bigger text for the “Show name”. Have the 2nd and 3rd lines be normal/smaller text with them being the DJ and the 3rd line being the time that their show is.

Thanks, I know I’m asking for a lot!

storm71852

to post a comment

JavaScript

38 Comments(s) _↴

@konithomimoMay 27.2007 — #It would be best to do this with a server-side script, so that the results are correct for each user. JS uses the time from the user's computer, so if their computer time is inaccurate then the results displayed on the page will be inaccurate.

@redhatlookMay 27.2007 — #But the disadvantage of server side script time is, when the visitor of the page is from japan and the server is located in usa, then the server time is not actually the current time in japan ? But in this case is better to use server time.. I didn't read properly the question ?

@storm71852authorJun 03.2007 — #well maybe in the future I can make it server side but for now this is all I can manage (script below) and it still doesn't work. Can somebody help me get this script working? Thanks.

http://www.freewebtown.com/reddiestorm/kswhscript.txt

@storm71852authorJun 05.2007 — #Anyone? I would really appreciate it, thanks!

@JMRKERJun 05.2007 — #Awfully complicated, but I would start with some change like this:

[code=php]
 <script type="text/javascript">
 
 var thedate   = new Date();
 var dayofweek = thedate.getUTCDay();
 var hourofday = thedate.getUTCHours();
 
 function onAir(dow,hod) {
 if ((dayofweek == dow) && (hourofday == hod)) {  return true; } else { return false; }
 }
 
 </script>
 [/code]

Then, for ALL your tests of 'onAir(dow,hod)" change to:

[code=php]
 if (onAir(1,1)) {
 document.write("<h2>No Show Scheduled<br>KSWH Weekend<br>1:00 a.m.</h2>");
 } 
 if (onAir(1,2)) {
 document.write("<h2>No Show Scheduled<br>KSWH Weekend<br>2:00 a.m.</h2>");
 }
 ...
 
 ...
 if (onAir(7,23)) {
 document.write("<h2>No Show Scheduled<br>KSWH Weekend<br>11:00 p.m.</h2>");
 }
 if (onAir(7,24)) {
 document.write("<h2>No Show Scheduled<br>KSWH Weekend<br>12:00 p.m.</h2>");
 }
 [/code]

You could also save a lot of load time with some assignments

ie:

var NoShow = '<h2>No Show Scheduled<br>KSWH Weekend<br>';

and then use

if (onAir(1,1)) { document.write(NoShow+"1:00 a.m.</h2>");}

which is repeated at the start of every "No Show Scheduled...." message.

Same logic can be applied to the duplicated shows when particular shows are scheduled.

Good Luck ... Post link when you have it done.

@storm71852authorJun 06.2007 — #Ok looking better, updated the link:

http://www.freewebtown.com/reddiestorm/kswhscript.txt

How do I go about getting it to display? How I've got it now in the head and body isn't working. Do I have to create a .js file?

Thanks again!

@JMRKERJun 07.2007 — #You must wear out your copy keys quickly. ?

Try this:

[code=php]
 <html>
 <head>
 <title>Station Times</title>
 <script type="text/javascript">
 
 var thedate   = new Date();
 var dayofweek = thedate.getUTCDay();
 var hourofday = thedate.getUTCHours();
 
 var NoShow = '<h2>No Show Scheduled<br>KSWH ';
 
 // The following could be cleaned up some
 var DH412 = "<h2><font color='red'>The EZ Show<br>with DJ EZ<br>12:00 p.m.</font></h2>";
 var DH415 = "<h2><font color='red'>Stormtracker News<br>with the Weatherman and ? ";
 var H15 = "<br>3:00 to 5:00 p.m.</font></h2>";
 var H16 = "<br>4:00 p.m.</font></h2>";
 var DH416 = DH415+H16;
 DH415 += H15;
 // The above could be cleaned up some
 
 var DayOfWeek = new Array('','Weekend','Monday','Tuesday','Wednesday','Thursday','Friday','Weekend');
 
 function onAir(dow,hod) {
 var HOD = hod+' a.m.</h2>';
 if (hod == 12) { HOD = hod+' p.m.</h2>'; }
 if (hod > 12) { HOD = (hod-12)+' p.m.</h2>'; }
 if (hod == 24) { HOD = (hod-12)+' a.m.</h2>'; }
 
 var DOWHOD = NoShow+DayOfWeek[dow]+'<br>'+HOD;
 if ((dow == 4) && (hod == 12)) { DOWHOD = DH412; }
 if ((dow == 4) && (hod == 15)) { DOWHOD = DH415; }
 if ((dow == 4) && (hod == 16)) { DOWHOD = DH416; }
 
 if ((dayofweek == dow) && (hourofday == hod)) { document.write(DOWHOD); }
 //  document.write(DOWHOD);  // use this line for testing purposes only
 }
 
 </script>
 </head>
 
 <body>
 <script type="text/javascript">
 for (var day=1; day<=7; day++) {
 for (var hour=1; hour<=24; hour++) { onAir(day,hour); }
 }
 </script>
 </body>
 </html>
 [/code]

@storm71852authorJun 07.2007 — #lol. I appreciate the help but must admit I'm still scratching my head over these new changes. I don't know much javascript and I understand what you are doing but don't know how to change my script to reflect that.

We haven't made out a schedule yet but I know we won't have shows on the weekend.

The following and down is puzzling but it looks like you concised it:

// The following could be cleaned up some

var DH412 = "<h2><font color='red'>The EZ Show<br>with DJ EZ<br>12:00 p.m.</font></h2>";

var DH415 = "<h2><font color='red'>Stormtracker News<br>with the Weatherman and ? ";

var H15 = "<br>3:00 to 5:00 p.m.</font></h2>";

var H16 = "<br>4:00 p.m.</font></h2>";

var DH416 = DH415+H16;

DH415 += H15;

@JMRKERJun 07.2007 — #I thought you had a pretty cushy job with station hours of only Wed from 3-5 pm.

Anyway, the 'DH' stuff is just assignment of variables.

(DHdhh representing DayHour### to match your onAir(D,H) function)

To alter to your needs:

1. Leave the 'NoShow' variable as is.

2. Set up 'DHdyy' values for each activity that is NOT 'NoShow':

var DH412 = "<h2>The EZ Show<br>with DJ EZ<br>12:00 p.m.</h2>";

var DH415 = "<h2>Stormtracker News<br>with the Weatherman and ? <br>3:00 to 5:00 p.m.</h2>";

var DH416 = "<h2>Stormtracker News<br>with the Weatherman and ? <br>4:00 p.m.</h2>";

3. Then for each 'dow' and 'hod' combination that is not 'NoShow', alter the DOWHOD default setting:

var DOWHOD = NoShow+DayOfWeek[dow]+'<br>'+HOD;

if ((dow == 4) && (hod == 12)) { DOWHOD = DH412; }

if ((dow == 4) && (hod == 15)) { DOWHOD = DH415; }

if ((dow == 4) && (hod == 16)) { DOWHOD = DH416; }

Temporarily uncomment the final 'document.write(DOWHOD);' to see entire contents for all days and all hours.

Good Luck! ?

@storm71852authorJun 07.2007 — #Well actually I'm the station's reporter too ? (and just helping with the webpage)

Ok, maybe I'm making some progress and haven't screwed the whole thing up. Now I'm mystified as to what to do with the body part. Show me how to add the other shows (an example) and what else I need to do to get this thing to display.

I have it on an actual webpage now:

http://www.freewebtown.com/reddiestorm/kswhliveschedule.htm

@JMRKERJun 08.2007 — #I'm getting more confused.

1. Did you try the program on post #8? Did it work for you, ie: Did you see the display?

2. Why did you merge your old script that didn't work with the script that did?

3. Where did the 'style=' requirement come from? It wasn't in the original question.

You should make the initial design work before you start changing it.

One of the first rules of programming is "design first, then code".

I'm getting the impression that you have reversed the order!

It's going to take some time to unscramble your last new attempt.

@JMRKERJun 08.2007 — #OK, try this. ?

Make sure it works to your likeing before you change it again.

Then make a back-up before you modify, just so you can return to a known good point.

[code=php]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <head>
 <title>Station Activity</title>
 <style type="text/css">
 div.Station {
 position:absolute; 
 left:56px; 
 top:47px; 
 width:420px; 
 height:135px; 
 z-index:1; 
 background-color:#CCCCCC; 
 layer-background-color:#CCCCCC; 
 border:1px solid red; /* none #000000; */
 }
 </style>
 <script type="text/javascript">
 var thedate   = new Date();
 var dayofweek = thedate.getUTCDay();
 var hourofday = thedate.getUTCHours();
 
 var DayOfWeek = new Array('','Weekend','Monday','Tuesday','Wednesday','Thursday','Friday','Weekend');
 
 var NoShow = '<h2>No Show Scheduled<br>KSWH Weekend<br>';
 var DH412 = '<h2>The EZ Show<br>with DJ EZ<br>Wednesday 12:00 p.m.</h2>';
 var DH415 = '<h2>Stormtracker News<br>with the Weatherman and ?<br>Wednesday 3:00 to 5:00 p.m.</h2>';
 var DH416 = '<h2>Stormtracker News<br>with the Weatherman and ?<br>Wednesday 4:00 p.m.</h2>';
 // Add more when schedule is known.  Note: there may be better ways to do this when information is known.
 
 function onAir(dow,hod) {
 var HOD = hod+' a.m.</h2>';
 if (hod == 12) { HOD = hod+' p.m.</h2>'; }
 if (hod > 12) { HOD = (hod-12)+' p.m.</h2>'; }
 if (hod == 24) { HOD = (hod-12)+' a.m.</h2>'; }
 
 var DOWHOD = NoShow+DayOfWeek[dow]+' '+HOD;
 if ((dow == 4) && (hod == 12)) { DOWHOD = DH412; }
 if ((dow == 4) && (hod == 15)) { DOWHOD = DH415; }
 if ((dow == 4) && (hod == 16)) { DOWHOD = DH416; } 
 // Add more when schedule is known.  Nogd; may be better ways to do this when information is known.
 
 if ((dayofweek == dow) && (hourofday == hod)) { document.getElementById('Layer1').innerHTML = DOWHOD; }
 // document.write(DOWHOD); }  // use for testing without line above
 //  document.write(DOWHOD);  // use this line for testing purposes only to show all possibilities
 }
 
 function StationSchedule() {
 for (var day=1; day<=7; day++) {
 for (var hour=1; hour<=24; hour++) { onAir(day,hour); }
 } 
 }
 
 </script>
 </head>
 
 <body>
 <div id="Layer1" class="Station">Station Schedule information here is replaced!</div>
 <script type="text/javascript">StationSchedule()</script>
 
 <div id="content" style="position:absolute; top:175px;">
 <h1>Rest of your website goes here.</h1>
 </div>
 </body>
 </html>
 [/code]

@storm71852authorJun 08.2007 — #hmmmm, sorry that's my fault, I must have combined it. I bet I didn't update the webpage before I inserted the new stuff. I apologize for that.

I'm at work right now so I'll get back to you. Thanks

@storm71852authorJun 08.2007 — #Updated:

http://www.freewebtown.com/reddiestorm/kswhliveschedule.htm

Sorry I'm such a pain. I added a few No Shows to the current hour I was checking the script to see if I could get it to display and nothing happened. The text isn't replaced with the schedule for that hour...

@JMRKERJun 08.2007 — #You did not copy the posting, you must have pasted parts into your original code.

1. You inserted incorrectly:

[code=php]
 <script type="text/javascript">
 
 <style type="text/css">
 [/code]

There is an 'extra' <script> tag definition.

You cannot have a <style> definition within the <script> tags

There are other errors, but this may have caused them.

Remove the first extra <script> tag before the <style> tag.

2. I don't think you need the extra NoShowM and NoShowF.

Change below to see a temporary page of ALL 7 x 24 displays to check.

Put it back as was if the original code handled the Mon & Fri displays correctly.

[code=php]
 //  if ((dayofweek == dow) && (hourofday == hod)) { //document.getElementById('Layer1').innerHTML = DOWHOD; }
 document.write(DOWHOD);  // use this line for testing purposes only to show all possibilities
 [/code]

Always:

1. Insert carefully.

2. Check the error console for syntax errors.

@storm71852authorJun 09.2007 — #http://www.freewebtown.com/reddiestorm/kswhliveschedule.htm

Your right, I've got to check and check again for errors...We are making progress!! It has the day right but I am checking it on Friday at 8:30 and it says that it is 1 a.m.

Thanks again for all your help, I really do appreciate your time.

@JMRKERJun 09.2007 — #The reason for the time display was explained back in post #2 and #3.

Take a look at the explainations and differences between

Date(), getDay(), getTime()

and your choice of code:

getUTCDay(), getUTCHours()

The functions are related to local time of the user's computer and Zulu (GMT) time.

You may need some sort of time conversion routine for your location, but I've never tried to do that. :o

@rootJun 09.2007 — #you know the server timezone, hard set it in a variable.

When the client load the page, grab the timezone offset from GMT then calculate client side what time your server is... then server up correct information.
offset = new Date().getTimezoneOffset();
offset = new Date().getTimezoneOffset()/60;
offset = -1 * new Date().getTimezoneOffset()/60;

are all three methods I have found so far, which one is correct, dont ask, as each site claimed to be "The correct method" of evaluating the clients timezone.

This assumes that the machines settings are correct and the user inst somewhere else like France when the machines home is Germany, for example.

Other than that, use of server-side to preset the server time in the served page is the only other way of determining the clients time relative to the server time.

@storm71852authorJun 10.2007 — #Code:

http://www.freewebtown.com/reddiestorm/kswhliveschedule2.htm

Original Code:

http://www.freewebtown.com/reddiestorm/kswhliveschedule.htm

Problems I need help with:

*It is not displaying the weekend at all, it did work on Friday at 8:30 PM but the time was wrong.

*Time: If we can get it to display we can see if it offsets

*I think I need another NoShow variable because the one in the code is for the weekend but during the week we don't need it to say KSWH Weekend for no shows.

Thanks!!! I appreciate the help and after perfecting the code will post our website with it

@JMRKERJun 11.2007 — #You're not paying attention to my directions, so let's take a step back so that you can see what works before you start changing it again. In the following code, a 7x24 matrix is created with ALL possible displays. You need to make sure you understand how they are generated, and specifically how they change for the Wed. 12-5pm displays.

Next, determine what you schedule is to be and insert the days/hours assignments. Make sure your changes are reflected in the matrix correctly.

Then, experiment with the GMT and offsetGMT variables to display the correct times locally (calculated from GMT and the offsetGMT variables). This may get a little tricky because the time is different from GMT (unless you live on the longitude of London, England) and the subraction may cause you to be on a different day as well as hour. For example EST is -4 from GMT. At 12AM, when today becomes tomorrow in London, it is still today here in Florida.

See: http://wwp.greenwichmeantime.com/time-zone/usa/eastern-time/

for some explainations. It may get super confusing in that Europe does not recognize daylight savings, causing the offset to be -5 instead of -4 without the current daylight savings factor. Google 'GMT' for other discussions about this.

Because time is part of your display, you may want to just display your local time and let the out of country user calculate the offset themselves to know when to tune into your station for a particular show. I think this is going to be a major problem for you with your current programming skills level.

But finally, once you have the schedule for your local time, then we'll go back and tackle the special display you want between the <div> tags.

Then you can incorporate it into your current website script.

Good Luck!

[code=php]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <head>
 <title>Station Activity</title>
 
 <style type="text/css">
 h2 { font-size:0.6em; }  /* temporary for testing purposes */
 </style>
 
 <script type="text/javascript">
 var thedate   = new Date();
 var dayofweek = thedate.getUTCDay();
 var hourofday = thedate.getUTCHours();
 
 var GMT = new Date().getTimezoneOffset();
 var offsetGMT = -5 * new Date().getTimezoneOffset()/60;
 
 //                         Sun=0     1        2         3           4          5        Sat=6
 var DayOfWeek = new Array('Weekend','Monday','Tuesday','Wednesday','Thursday','Friday','Weekend');
 
 var NoShow = '<h2>No Show Scheduled KSWH ';
 var DH312 = '<h2>The EZ Show<br>with DJ EZ<br>Wednesday 12:00 p.m.</h2>';
 var DH315 = '<h2>Stormtracker News<br>with the Weatherman and ?<br>Wednesday 3:00 to 5:00 p.m.</h2>';
 var DH316 = '<h2>Stormtracker News<br>with the Weatherman and ?<br>Wednesday 4:00 p.m.</h2>';
 // Add more when schedule is known.  Note: there may be better ways to do this when information is known.
 
 function onAir(dow,hod) {
 var HOD = hod+' a.m.</h2>';
 if (hod == 0) { HOD = (hod+12)+' a.m.</h2>'; }
 if (hod == 12) { HOD = hod+' p.m.</h2>'; }
 if (hod > 12) { HOD = (hod-12)+' p.m.</h2>'; }
 
 var DOWHOD = NoShow+'<br />'+DayOfWeek[dow]+' '+HOD;
 if (dow == 3) { // FONT stuff for testing purposes only
 if (hod == 12) { DOWHOD = '<font color="red">'+DH312+'</font>'; }
 if (hod == 15) { DOWHOD = '<font color="red">'+DH315+'</font>'; }
 if (hod == 16) { DOWHOD = '<font color="red">'+DH316+'</font>'; }
 
 // uncomment following to see effects of getTimezoneOffset() function 

 //    if ((hod >=12) && (hod <=16)) {
 //      DOWHOD += '<br />'+GMT+'<br />'+offsetGMT+'<br />'+(hod+offsetGMT);
 //      alert('dow:'+dow+'nhod:'+hod+'nGMT:'+GMT+'noffsetGMT:'+offsetGMT+'nlocal:'+(hod+offsetGMT)); }
 //    } 
 }
 // Add more when schedule is known.  Note: may be better ways to do this when information is known.
 return DOWHOD;
 }
 
 function TableStationSchedule() {
 var str = '<table border="1" width="100%">';
 str += '<th>Days<br />0-6<p />Hour<br />0-23</th>';
 for (var i=0; i<7; i++) { str += '<th>('+i+') '+DayOfWeek[i]+'</th>'; }
 str += '</tr>';
 for (var hour=0; hour<24; hour++) {
 str += '<tr><th>'+hour+'</th>';
 for (var day=0; day<7; day++) { str += '<td>'+onAir(day,hour)+'</td>'; }
 str += '</tr>';
 document.write(str);
 str = '';
 }
 str += '</table>';
 }
 </script>
 </head>
 
 <body>
 <script type="text/javascript">TableStationSchedule()</script>
 </body>
 </html> 
 [/code]

@rootJun 11.2007 — #Something like this, according to my system, when its 10am here it should be 4am at your server as I am in a Day Light Savings Area the UTC time will be 9am which is confusing when counting ahead, eg if its 11 am on my PC, the server time should be 4pm if the server was 6 hours ahead because the time on my PC is actuallt 10am UTC.

function getDow(a){return (['Sun','Mon','Tue','Wednes','Thurs','Fri','Sat'][a] + 'day');}
 server_offset_in_hours = -5; // expressed as - for behind GMT and + for ahead of GMT
 // server offset in milliseconds, hardcoded as it doesnt change
 server = { offset:server_offset_in_hours * (60 * 60 * 1000) };
 // calculate client time
 with(new Date)
 {
 client = {
 offset:getTimezoneOffset() * (60*1000),
 ticks:getTime(),
 dls:getUTCHours()-getHours(),
 time:{	hours:getUTCHours(),
 minutes:getUTCMinutes(),
 seconds:getUTCSeconds(),
 dow:getDay()
 dd:getDate(),
 mm:1+getMonth(),
 yy:getFullYear()
 },
 
 <i>	</i>		};
 }
 // calculate the server time based on the given data
 with(new Date(client.ticks+server.offset)){
 server.time = { 
 hours:getUTCHours(),
 minutes:getUTCMinutes(),
 seconds:getUTCSeconds(),
 dd:getDate(),
 mm:1+getMonth(),
 yy:getFullYear(),
 dow:getDay()
 };
 };
 // now you can extract the server time and the cleint time from the objects directly
 with(server.time){
 server_time =  [hours,minutes,seconds].join(':');
 server_time = getDow(server.time.dow) + " " + server_time;
 }
 with(client.time){
 client_time = [hours-client.dls,minutes,seconds].join(':');
 client_time = getDow(client.time.dow) + " " + client_time;
 }
 alert("Server: "+server_time+"rnClient: "+client_time);

Any good to you?

@storm71852authorSep 18.2007 — #all right guys and girls I have a schedule now that I will post (a little later) but I wanted to make sure that someone would help me so please reply back to this and let me know this is still an active post, thanks!

@JMRKERSep 19.2007 — #Lots of people are willing to help

but due to complexicity of the problem

may or may not be able.

Let's see what you have now.

@storm71852authorSep 19.2007 — #all right, I'm willing to start from the bottom again, so if we have to make a new code that's fine with me. So we have shows during the week and below is the format I'd like to have- and I do need to be able to change things because some shows do not have a name yet.

Show Name

DJ's

Time

Genre

EXAMPLE:

The Storm Hour

with DJ's Weatherman and Reba

3 to 5 p.m.

Classic Rock

Weekends we do not have shows scheduled but are still on-air.

SCHEDULE:

MONDAY

No Show Name

with Cody Graves

10 AM

No Genre

No Show Name

with DJ JT

Noon

No Genre

Real Talk

with DJ Yella

2 PM

No Genre

No Show Name

with Katy Cox

4 PM

Rap

The Greatest

with DJ Fresh

5 PM

No Genre

Revolution Corner

with Randy Underwood

6 PM

No Genre

Daily Affirmation

with DJ Hightower

8 PM

No Genre

No Show Name

with David D.

10 to 11 PM

No Genre

TUESDAY

No Show Name

with Michelle Caillouet

1 PM

Rock

No Show Name

with Sweet Action Jackson

4 to 5 PM

Rock

The Rock Hour

with DJ Dan the Man

8 PM

No Genre

WEDNESDAY

Love Me! Hate Me!

with DJ Nia

10 AM

No Genre

Westcoast Wednesdays

with DJ Smoove

11 AM

No Genre

The Storm Hour

with the Weatherman and Reba

3 to 5 PM

Classic Rock

EZ Does It

with DJ EZ

10 PM

No Genre

THURSDAY

Quad Show

with J Bean and LongJohn

Noon to 2 PM

Rap/Urban

The Hour

with DJ V-Jeezy

2 PM

No Genre

No Show Name

with DJ Savana

3 PM

No Genre

FRIDAY

The Christian Hour

with Jammin J

10 to Noon

Christian

The Em and Tag Show

with Em and Tag

Noon to 2 PM

Rock

No Show Name

with DJ Kevin

3 PM

No Genre

Big Hampton's Block

with Big Hampton

4 to 6 PM

No Genre

Rockin' 'till Midnight

with Werewolf

11 PM

No Genre

Ok, let's see what we can do with this, I appreciate all the help!

@JMRKERSep 19.2007 — #How did the code work from post #21?

Is it anywhere close to what you want to do now? ?

How will display differ now from display requirements then?

Have requirements changed for time difference displays?

@storm71852authorSep 19.2007 — #I was pretty please with the code, I don't think I got around to putting that last stuff in b/c I was busy. So if you want to start a new code or build one off the original that's fine with me.

as far as size restrictions go check out kswh.org and we would like to fit in on one side of the sidebars for now, I'm looking at new designs and so it could be a bit larger.

Basically we need to start over because I have no clue where I was in the code and I don't know much about javascript. I can find the file and upload it again and you can take a look at that code again if you want, or look earlier in this post and I guess it should be updated.

@JMRKERSep 19.2007 — #Looks like you have a professionally designed web page already.

I'm not sure what you want changed from your descriptions.

I'll be glad to answer questions about code you develop or that I send,

but I don't have a lot of time to start over again when the end point

is so ill defined. Take a look at your initial questions and look again

at post #21 to see the steps taken to get to that point. You can

add more D### definitions and checks if you want ...

OR for a quick and dirty solution,

consider making an Excel spreadsheet display and saving as HTML file.

Then use some pop-up or iframe script logic to display this file

when a button is clicked.

Last option would be go have additional changes made by initial developer of the current display at kswh.org site.

Your choice as to how much work you want to put into the project

and how much effort you want to put into learning the JS/HTML languages.

@storm71852authorSep 22.2007 — #hmmmm...ok now what? I did remove the UTC to just

var dayofweek = thedate.getDay();

var hourofday = thedate.getHours();

maybe that didn't mess anything up- my display is really weird though

http://jsweather.byethost7.com/kswhliveschedule2-3.html

@JMRKERSep 23.2007 — #OK, shift gears...

[code=php]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <head>
 <title>Station Activity</title>
 
 <style type="text/css">
 td { font-size:0.6em; }  /* temporary for testing purposes */
 </style>
 
 <script type="text/javascript">
 
 /*  NOT CURRENTLY USED
 var thedate   = new Date();
 var dayofweek = thedate.getDay();
 var hourofday = thedate.getHours();
 
 var GMT = new Date().getTimezoneOffset();
 var offsetGMT = -5 * new Date().getTimezoneOffset()/60;
 */
 
 //                         Sun=0     1        2         3           4          5        Sat=6
 var DayOfWeek = new Array('Weekend','Monday','Tuesday','Wednesday','Thursday','Friday','Weekend');
 
 var NoShow = 'No Show Scheduled<br />for KSWH';
 var DH = new Array (7);
 for (d=0; d<7; d++) {
 DH[d] = new Array (24);
 for (h=0; h<24; h++) { DH[d][h] = ''; }
 }
 
 DH[1][10] = 'No Show Name<br>with Cody Graves<br>Monday at 10 AM<hr>No Genre';
 DH[1][12] = 'No Show Name<br>with DJ JT<br>Monday at Noon<hr>No Genre';
 DH[1][14] = 'Real Talk<br>with DJ Yella<br>Monday at 2 PM<br>No Genre';
 DH[1][16] = 'No Show Name<br>with Katy Cox<br>Monday at 4 PM<br>Rap';
 DH[1][17] = 'The Greatest<br>with DJ Fresh<br>Monday at 5 PM<br>No Genre';
 DH[1][18] = 'Revolution Corner<br>with Randy Underwood<br>Monday at 6 PM<br>No Genre';
 DH[1][20] = 'Daily Affirmation<br>with DJ Hightower<br>Monday at 8 PM<br>No Genre';
 DH[1][22] = 'No Show Name<br>with David Doggett<br>Monday 10 to Midnight<br>No Genre';
 DH[1][23] = 'No Show Name<br>with David Doggett<br>Monday at 11 PM<br>No Genre';
 DH[2][13] = 'No Show Name<br>with Michelle Caillouet<br>Tuesday at 1 PM<br>Rock';
 DH[2][16] = 'No Show Name<br>with Sweet Action Jackson<br>Tuesday at 4 PM<br>Rock';
 DH[2][20] = 'The Rock Hour<br>with Dan the Man<br>Tuesday at 8 PM<br>No Genre';
 DH[3][10] = 'Love Me! Hate Me!<br>with DJ Nia<br>Wednesday at 10 AM<br>No Genre';
 DH[3][11] = 'Westcoast Wednesdays<br>with DJ Smoove<br>Wednesday at 11 AM<br>No Genre';
 DH[3][15] = 'The Storm Hour<br>with the Weatherman and Reba<br>Wednesday 3 to 5 PM<br>Classic Rock';
 DH[3][16] = 'The Storm Hour<br>with the Weatherman and Reba<br>Wednesday at 4 PM<br>Classic Rock';
 DH[3][22] = 'EZ Does It<br>with DJ EZ<br>Wednesday at 10 PM<br>Rap';
 DH[4][12] = 'The Quad Show<br>with J Bean & LongJohn<br>Thursday Noon to 2 PM<br>Rap/Urban';
 DH[4][13] = 'The Quad Show<br>with J Bean & LongJohn<br>Thursday at 1 PM<br>Rap/Urban';
 DH[4][14] = 'The Hour<br>with DJ V-Jeezy<br>Thursday at 2 PM<br>No Genre';
 DH[4][15] = 'No Show Name<br>with DJ Savana<br>Thursday at 3 PM<br>No Genre';
 DH[5][10] = 'The Christian Hour<br>with Jammin J<br>Friday 10 to Noon<br>Christian';
 DH[5][11] = 'The Christian Hour<br>with Jammin J<br>Friday at 11 AM<br>Christian';
 DH[5][12] = 'The Em and Tag Show<br>with Em and Tag<br>Friday Noon to 2 PM<br>Rock';
 DH[5][13] = 'The Em and Tag Show<br>with Em and Tag<br>Friday at 1 PM<br>Rock';
 DH[5][14] = 'No Show Name<br>with DJ Kevin<br>Friday at 3 PM<br>No Genre';
 DH[5][15] = 'Big Hamptons Block<br>with Big Hampton<br>Friday 4 to 6 PM<br>Rap';
 DH[5][16] = 'Big Hamptons Block<br>with Big Hampton<br>Friday at 5 PM<br>Rap';
 DH[5][22] = 'Rockin till Midnight<br>with DJ Werewolf<br>Friday 10 to Midnight<br>Rock';
 DH[5][23] = 'Rockin till Midnight<br>with DJ Werewolf<br>Friday at 11 PM<br>Rock';
 // Add more when schedule is known.  Note: there may be better ways to do this when information is known.
 
 function TableStationSchedule() {
 var str = '<table border="1" width="100%">';
 str += '<th>Days<br />0-6<p />Hour<br />0-23</th>';
 for (var i=0; i<7; i++) { str += '<th>('+i+') '+DayOfWeek[i]+'</th>'; }
 str += '</tr>';
 for (var h=0; h<24; h++) {
 str += "<tr><td>"+h+"</td>"; 
 for (var d=0; d<7; d++) {
 if (DH[d][h] == '') { str += '<td>'+NoShow+'</td>'; }
 else { str += "<td><font color='red'>" + DH[d][h] + "</font></td>"; }
 }
 str += "</tr>"; 
 } 
 str += "</table>";
 return str;
 }
 
 </script>
 </head>
 <body>
 <script type="text/javascript">document.write(TableStationSchedule())</script>
 </body>
 </html> 
 [/code]

@storm71852authorSep 23.2007 — #ok- that's a good way to step back and look at it. Thanks for cleaning up my code!

So let's have that page remain our test page:

http://jsweather.byethost7.com/kswhliveschedule2-3.html

and then our final product at this address:

http://jsweather.byethost7.com/kswhliveschedulefinal.html

*all I removed was the code that made it for testing purposes and nothings showing up...

@JMRKERSep 23.2007 — #You have a syntax error in the second link.

See extra: */

JS is not very forgiving about errors that it finds. It usually just stops!

That's what is happening here. When the '*/' error is found, the table never gets displayed.

If using FF, look at the JS error console. It usually points to a problem area if any. When you remove code, be sure you look at the potential effects.

@storm71852authorSep 23.2007 — #ah ok that makes sense. It's just like html, you miss one thing and it throws the whole thing off.

So how do I make it just show the current hours box instead of all of them? I think we had it in the code early in the beginning of all this

@JMRKERSep 23.2007 — #Here's one way with an alert message.

[code=php]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <head>
 <title>Station Activity</title>
 
 <style type="text/css">
 td { font-size:0.6em; }  /* temporary for testing purposes */
 </style>
 
 <script type="text/javascript">
 
 /*  NOT CURRENTLY USED
 var thedate   = new Date();
 var dayofweek = thedate.getDay();
 var hourofday = thedate.getHours();
 
 var GMT = new Date().getTimezoneOffset();
 var offsetGMT = -5 * new Date().getTimezoneOffset()/60;
 */
 
 //                         Sun=0     1        2         3           4          5        Sat=6
 var DayOfWeek = new Array('Weekend','Monday','Tuesday','Wednesday','Thursday','Friday','Weekend');
 
 var NoShow = 'No Show Scheduled<br />for KSWH';
 var DH = new Array (7);
 for (d=0; d<7; d++) {
 DH[d] = new Array (24);
 for (h=0; h<24; h++) { DH[d][h] = ''; }
 }
 
 DH[1][10] = 'No Show Name<br>with Cody Graves<br>Monday at 10 AM<hr>No Genre';
 DH[1][12] = 'No Show Name<br>with DJ JT<br>Monday at Noon<hr>No Genre';
 DH[1][14] = 'Real Talk<br>with DJ Yella<br>Monday at 2 PM<br>No Genre';
 DH[1][16] = 'No Show Name<br>with Katy Cox<br>Monday at 4 PM<br>Rap';
 DH[1][17] = 'The Greatest<br>with DJ Fresh<br>Monday at 5 PM<br>No Genre';
 DH[1][18] = 'Revolution Corner<br>with Randy Underwood<br>Monday at 6 PM<br>No Genre';
 DH[1][20] = 'Daily Affirmation<br>with DJ Hightower<br>Monday at 8 PM<br>No Genre';
 DH[1][22] = 'No Show Name<br>with David Doggett<br>Monday 10 to Midnight<br>No Genre';
 DH[1][23] = 'No Show Name<br>with David Doggett<br>Monday at 11 PM<br>No Genre';
 DH[2][13] = 'No Show Name<br>with Michelle Caillouet<br>Tuesday at 1 PM<br>Rock';
 DH[2][16] = 'No Show Name<br>with Sweet Action Jackson<br>Tuesday at 4 PM<br>Rock';
 DH[2][20] = 'The Rock Hour<br>with Dan the Man<br>Tuesday at 8 PM<br>No Genre';
 DH[3][10] = 'Love Me! Hate Me!<br>with DJ Nia<br>Wednesday at 10 AM<br>No Genre';
 DH[3][11] = 'Westcoast Wednesdays<br>with DJ Smoove<br>Wednesday at 11 AM<br>No Genre';
 DH[3][15] = 'The Storm Hour<br>with the Weatherman and Reba<br>Wednesday 3 to 5 PM<br>Classic Rock';
 DH[3][16] = 'The Storm Hour<br>with the Weatherman and Reba<br>Wednesday at 4 PM<br>Classic Rock';
 DH[3][22] = 'EZ Does It<br>with DJ EZ<br>Wednesday at 10 PM<br>Rap';
 DH[4][12] = 'The Quad Show<br>with J Bean & LongJohn<br>Thursday Noon to 2 PM<br>Rap/Urban';
 DH[4][13] = 'The Quad Show<br>with J Bean & LongJohn<br>Thursday at 1 PM<br>Rap/Urban';
 DH[4][14] = 'The Hour<br>with DJ V-Jeezy<br>Thursday at 2 PM<br>No Genre';
 DH[4][15] = 'No Show Name<br>with DJ Savana<br>Thursday at 3 PM<br>No Genre';
 DH[5][10] = 'The Christian Hour<br>with Jammin J<br>Friday 10 to Noon<br>Christian';
 DH[5][11] = 'The Christian Hour<br>with Jammin J<br>Friday at 11 AM<br>Christian';
 DH[5][12] = 'The Em and Tag Show<br>with Em and Tag<br>Friday Noon to 2 PM<br>Rock';
 DH[5][13] = 'The Em and Tag Show<br>with Em and Tag<br>Friday at 1 PM<br>Rock';
 DH[5][14] = 'No Show Name<br>with DJ Kevin<br>Friday at 3 PM<br>No Genre';
 DH[5][15] = 'Big Hamptons Block<br>with Big Hampton<br>Friday 4 to 6 PM<br>Rap';
 DH[5][16] = 'Big Hamptons Block<br>with Big Hampton<br>Friday at 5 PM<br>Rap';
 DH[5][22] = 'Rockin till Midnight<br>with DJ Werewolf<br>Friday 10 to Midnight<br>Rock';
 DH[5][23] = 'Rockin till Midnight<br>with DJ Werewolf<br>Friday at 11 PM<br>Rock';
 // Add more when schedule is known.  Note: there may be better ways to do this when information is known.
 
 // delete this function if table display is NOT desired.
 function TableStationSchedule() {
 var str = '<table border="1" width="100%">';
 //  str += '<th>Days<br />0-6<p />Hour<br />0-23</th>';
 str += '<th><button onClick="OnNow()">On Now</button></th>';
 for (var i=0; i<7; i++) { str += '<th>'+DayOfWeek[i]+'</th>'; }
 str += '</tr>';
 for (var h=0; h<24; h++) {
 var hr;
 if (h == 0) { hr = '12 am'; }
 if ((h >0) && (h<12)) { hr = h+' am'; }
 if (h == 12) { hr = '12 pm'; }
 if (h > 12) { hr = (h-12)+' pm'; }
 str += "<tr><td>"+hr+"</td>"; 
 for (var d=0; d<7; d++) {
 if (DH[d][h] == '') { str += '<td>'+NoShow+'</td>'; }
 else { str += "<td><font color='red'>" + DH[d][h] + "</font></td>"; }
 }
 str += "</tr>"; 
 } 
 str += "</table>";
 return str;
 }
 function OnNow() {
 var thedate   = new Date();
 var dayofweek = thedate.getDay();
 var hourofday = thedate.getHours();
 //  alert(dayofweek+':'+hourofday+'<br />'+DH[dayofweek][hourofday]);
 var showOn = DH[dayofweek][hourofday];
 if (showOn == '') { showOn = thedate+'nnNo Show Currently Scheduled for KSWH'; }
 alert(showOn);
 }
 </script>
 </head>
 <body>
 <!--  Unhide this if table display desired
 <script type="text/javascript">
 document.write(TableStationSchedule())
 </script>
 -->
 <script type="text/javascript">
 document.write('<button onClick="OnNow()">Now On KSWH</button>');
 </script>
 </body>
 </html> 
 [/code]

Left TableStationSchedule() function in, but you can eliminate if you are done with the testing display.

@storm71852authorSep 24.2007 — #Cool! Also what about just a regular box display on the page? Just so I can give the station more than one option to choose from. Thanks for all your help, I know it's probably frustrating someone who doesn't know much about java.

@JMRKERSep 24.2007 — #Add this before the <script> tag.

[code=php]
 <style type="text/css">
 td { font-size:0.6em; }  /* temporary for testing purposes */
 #NowOn {
 border: 2px solid red;
 font-size: 1.5em;
 color: red;
 background: yellow;
 height: 200px;
 width: 400px;
 }
 </style>
 [/code]

Then after the OnNow() function add this:

[code=php]
 function NowON() {
 var thedate   = new Date();
 var dayofweek = thedate.getDay();
 var hourofday = thedate.getHours();
 var showOn = DH[dayofweek][hourofday];
 if (showOn == '') { showOn = thedate+'<p />No Show Currently Scheduled for KSWH'; }
 document.getElementById('NowOn').innerHTML = showOn;
 }
 [/code]

Finally, add this before the final </body> tag:

[code=php]
 <script type="text/javascript">
 document.write('<button onClick="OnNow()">Now On KSWH</button>');
 </script>
 <div id='NowOn' onClick="NowON()">Click For Now On KSWH</div>
 [/code]

Use whichever version you wish.

Note: I don't know much about java either, this is javascript.

Good Luck!

@storm71852authorSep 24.2007 — #Is there any way to eliminate the button or some action?

@JMRKERSep 24.2007 — #Sure, take out the button reference in the body.

Eliminate the function that produces the alert with the button press

if you are sure you never want to display this way.

@storm71852authorOct 06.2007 — #Hey, I appreciate all the help, I know it takes time!

The boss would like one more option, do you know how to turn this into a ticker and to where I could add headlines with it OR add this DJ info to an existing ticker?

Thanks

Also in #JavaScript _↴

Input field values in to email message ...Missing Name After . Operator problem in code javascript desktop alert

Success!

Help @storm71852 spread the word by sharing this article on Twitter...

Tweet This

Need Help with Time of Day Script

38 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Need Help with Time of Day Script

38 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

38 Comments(s) _↴

Also in #JavaScript _↴