ON AIR Radio Display Script [Archive]

View Full Version : ON AIR Radio Display Script

reddiestorm

01-08-2008, 07:48 PM

The following script is currently being used on my radio station's website to display the show that is currently on air.

My question is, how would I use this script to display a daily schedule (when displayed it would show the shows for that day)?

Thanks!
---------------------------------------------------------------------------

<!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 */
#NowOn {
border: 0px solid black;
font-size: 11.5px;
color: black;
background: transparent;
height: 55px;
width: 350px;
}
</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 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] = 'Monday at 10 AM Modern Rock with Cody Graves';
DH[1][12] = 'No Show Name with DJ JT Monday at Noon No Genre';
DH[1][14] = 'Real Talk with DJ Yella Monday at 2 PM No Genre';
DH[1][16] = 'No Show Name with Katy Cox Monday at 4 PM Rap';
DH[1][17] = 'The Greatest with DJ Fresh Monday at 5 PM No Genre';
DH[1][18] = 'Revolution Corner with Randy Underwood Monday at 6 PM No Genre';
DH[1][20] = 'Daily Affirmation with DJ Hightower Monday at 8 PM No Genre';
DH[1][22] = 'No Show Name with David Doggett Monday 10 to Midnight No Genre';
DH[1][23] = 'No Show Name with David Doggett Monday at 11 PM No Genre';
DH[2][13] = 'No Show Name with Michelle Caillouet Tuesday at 1 PM Rock';
DH[2][16] = 'No Show Name with Sweet Action Jackson Tuesday at 4 PM Rock';
DH[2][20] = 'The Rock Hour with Dan the Man Tuesday at 8 PM No Genre';
DH[3][10] = 'Love Me! Hate Me! with DJ Nia Wednesday at 10 AM No Genre';
DH[3][11] = 'Westcoast Wednesdays with DJ Smoove Wednesday at 11 AM No Genre';
DH[3][15] = 'The Storm Hour with the Weatherman and Reba Wednesday 3 to 5 PM Classic Rock';
DH[3][16] = 'The Storm Hour with the Weatherman and Reba Wednesday at 4 PM Classic Rock';
DH[3][22] = 'EZ Does It with DJ EZ Wednesday at 10 PM Rap';
DH[4][12] = 'The Quad Show with J Bean & LongJohn Thursday Noon to 2 PM Rap/Urban';
DH[4][13] = 'The Quad Show with J Bean & LongJohn Thursday at 1 PM Rap/Urban';
DH[4][14] = 'The Hour with DJ V-Jeezy Thursday at 2 PM No Genre';
DH[4][15] = 'No Show Name with DJ Savana Thursday at 3 PM No Genre';
DH[5][10] = 'Friday at 10 AM Christian Music with Jammin J';
DH[5][11] = 'Friday at 11 AM Christian Music with Jammin J';
DH[5][12] = 'Friday at Noon Modern Rock with Tag and Em';
DH[5][13] = 'Friday at 1 PM Modern Rock with Tag and Em';
DH[5][14] = 'Friday at 2 PM Urban Music with Brandon Tabor';
DH[5][15] = 'Friday at 3 PM Unknown Genre with DJ Kevin';
DH[5][16] = 'Friday at 4 PM Urban Music with Big Hampton';
DH[5][17] = 'Friday at 5 PM Urban Music with Big Hampton';
DH[5][22] = 'Friday at 10 PM Modern Rock with DJ Werewolf';
DH[5][23] = 'Friday at 11 PM Modern Rock with DJ Werewolf';
// Add more when schedule is known. Note: there may be better ways to do this when information is known.

function OnNow() {
var thedate = new Date();
var dayofweek = thedate.getDay();
var hourofday = thedate.getHours();
// alert(dayofweek+':'+hourofday+' '+DH[dayofweek][hourofday]);
var showOn = DH[dayofweek][hourofday];
if (showOn == '') { showOn = thedate+'\n\nNo Show Scheduled'; }
alert(showOn);
}

function NowON() {
var thedate = new Date();
var dayofweek = thedate.getDay();
var hourofday = thedate.getHours();
var showOn = DH[dayofweek][hourofday];
if (showOn == '') { showOn = thedate+'No Show Scheduled'; }
document.getElementById('NowOn').innerHTML = showOn;
}
</script>
</head>
<BODY onLoad="NowON()">

<script type="text/javascript">
document.write(NowON());
</script>
<div id='NowOn' onClick="NowON()">Click For Now On KSWH</div>
</body>
</html>

pman

01-09-2008, 01:38 AM

Your array has the following structure

DH[day][hour]

So, you will need to find out which day it is. For example, if today is Friday, then you would loop through

DH[5][*ALL*]

and display that on the screen. Just a pseudo code: the for loop could be this

var schedule = "" ;
for(i = 0 ; i < 24 ; i++)
{
if(DH[5][i] != "")
schedule += DH[5][i] ;
}

Now you have the entire schedule for Friday

reddiestorm

01-09-2008, 08:08 PM

makes sense,

How do I display it in the browser? I know I need to change the script from showing the hourly display to the daily display. Do I need a new function or change up the NowON function? I experimented some but was unable to get the day's shows to display.

Thanks again!

pman

01-10-2008, 01:59 AM

You can modify NowON function or create a new one. It's up to you. Here's a new function that should return the schedule for the day that you want.

function getSchedule(day)
{
var schedule = "" ;
for(i = 0 ; i < 24 ; i++)
{
if(DH[day][i] != "")
schedule += DH[day][i] ;
}
return schedule ;
}

Now whenever you need the schedule for any specific day, you can just call that function and pass the day as the parameter. For example, this should return today's schedule and you can display it in a div.

var date = new Date() ;
var today = date.getDay() ;
var schedule = getSchedule(today) ;
document.getElementById("sch").innerHTML = schedule ;

reddiestorm

01-11-2008, 06:17 PM

I apologize, I'm still not getting results- I must be doing it wrong or not changing something. The answer is probably right in front of me.

Can you take a look at my code again?

Thanks for all your help!!!

pman

01-12-2008, 01:21 AM

Can you post your link here. Also, try using Firebug plug in for Firefox. It's a great tool for debugging Javascript.

reddiestorm

01-13-2008, 11:00 PM

I guess I'm not exactly sure where to put this:

var date = new Date() ;
var today = date.getDay() ;
var schedule = getSchedule(today) ;
document.getElementById("sch").innerHTML = schedule ;

I inserted the new function...I'll try and upload it somewhere soon...

reddiestorm

01-15-2008, 05:13 PM

Where does this go? Along with the function?

var date = new Date() ;
var today = date.getDay() ;
var schedule = getSchedule(today) ;
document.getElementById("sch").innerHTML = schedule ;

---------------------------------------------------------------
<!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 */
#NowOn {
border: 0px solid black;
font-size: 11.5px;
color: black;
background: transparent;
height: 55px;
width: 350px;
}
</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 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] = 'Monday at 10 AM Modern Rock with Cody Graves';
DH[1][12] = 'No Show Name with DJ JT Monday at Noon No Genre';
DH[1][14] = 'Real Talk with DJ Yella Monday at 2 PM No Genre';
DH[1][16] = 'No Show Name with Katy Cox Monday at 4 PM Rap';
DH[1][17] = 'The Greatest with DJ Fresh Monday at 5 PM No Genre';
DH[1][18] = 'Revolution Corner with Randy Underwood Monday at 6 PM No Genre';
DH[1][20] = 'Daily Affirmation with DJ Hightower Monday at 8 PM No Genre';
DH[1][22] = 'No Show Name with David Doggett Monday 10 to Midnight No Genre';
DH[1][23] = 'No Show Name with David Doggett Monday at 11 PM No Genre';
DH[2][13] = 'No Show Name with Michelle Caillouet Tuesday at 1 PM Rock';
DH[2][16] = 'No Show Name with Sweet Action Jackson Tuesday at 4 PM Rock';
DH[2][20] = 'The Rock Hour with Dan the Man Tuesday at 8 PM No Genre';
DH[3][10] = 'Love Me! Hate Me! with DJ Nia Wednesday at 10 AM No Genre';
DH[3][11] = 'Westcoast Wednesdays with DJ Smoove Wednesday at 11 AM No Genre';
DH[3][15] = 'The Storm Hour with the Weatherman and Reba Wednesday 3 to 5 PM Classic Rock';
DH[3][16] = 'The Storm Hour with the Weatherman and Reba Wednesday at 4 PM Classic Rock';
DH[3][22] = 'EZ Does It with DJ EZ Wednesday at 10 PM Rap';
DH[4][12] = 'The Quad Show with J Bean & LongJohn Thursday Noon to 2 PM Rap/Urban';
DH[4][13] = 'The Quad Show with J Bean & LongJohn Thursday at 1 PM Rap/Urban';
DH[4][14] = 'The Hour with DJ V-Jeezy Thursday at 2 PM No Genre';
DH[4][15] = 'No Show Name with DJ Savana Thursday at 3 PM No Genre';
DH[5][10] = 'Friday at 10 AM Christian Music with Jammin J';
DH[5][11] = 'Friday at 11 AM Christian Music with Jammin J';
DH[5][12] = 'Friday at Noon Modern Rock with Tag and Em';
DH[5][13] = 'Friday at 1 PM Modern Rock with Tag and Em';
DH[5][14] = 'Friday at 2 PM Urban Music with Brandon Tabor';
DH[5][15] = 'Friday at 3 PM Unknown Genre with DJ Kevin';
DH[5][16] = 'Friday at 4 PM Urban Music with Big Hampton';
DH[5][17] = 'Friday at 5 PM Urban Music with Big Hampton';
DH[5][22] = 'Friday at 10 PM Modern Rock with DJ Werewolf';
DH[5][23] = 'Friday at 11 PM Modern Rock with DJ Werewolf';
// Add more when schedule is known. Note: there may be better ways to do this when information is known.

function OnNow() {
var thedate = new Date();
var dayofweek = thedate.getDay();
var hourofday = thedate.getHours();
// alert(dayofweek+':'+hourofday+' '+DH[dayofweek][hourofday]);
var showOn = DH[dayofweek][hourofday];
if (showOn == '') { showOn = thedate+'\n\nNo Show Scheduled'; }
alert(showOn);
}

function NowON() {
var thedate = new Date();
var dayofweek = thedate.getDay();
var hourofday = thedate.getHours();
var showOn = DH[dayofweek][hourofday];
if (showOn == '') { showOn = thedate+'No Show Scheduled'; }
document.getElementById('NowOn').innerHTML = showOn;
}

function getSchedule(day)
{
var schedule = "" ;
for(i = 0 ; i < 24 ; i++)
{
if(DH[day][i] != "")
schedule += DH[day][i] ;
}
return schedule ;
}
</script>
</head>
<BODY onLoad="getSchedule()">

<script type="text/javascript">
document.write(getSchedule());
</script>
<div id='NowOn' onClick="getSchedule()">Click For Now On KSWH</div>
</body>
</html>

pman

01-16-2008, 12:57 AM

Where does this go? Along with the function?

var date = new Date() ;
var today = date.getDay() ;
var schedule = getSchedule(today) ;
document.getElementById("sch").innerHTML = schedule ;

That was just an example on how you could use the function that will return the schedule for any specific day. So basically, if you want your users to click on a button and then display this, you would put this in the function that will be called when the user clicks on the button. The last line which is:

document.getElementById("sch").innerHTML = schedule ;

will have the schedule of the day in the div whose id is "sch". It can be anything. Just replace the id with your div's id.

If you just want the schedule of the day to be displayed when your page loads, you can put it in the function that is called when the page loads. In your case, it would be getSchedule()

I hope I answered your question here. Let me know how it goes.

reddiestorm

01-16-2008, 02:18 AM

pman

01-17-2008, 12:40 AM

hmmm...I was actually close then. I've checked everything and I'm still not getting results. Here are the links finally:

website: http://stuwww.hsu.edu/kswh/2008/index.htm
javascript: http://stuwww.hsu.edu/kswh/2008/liveschedule3.html

I checked the 2nd page "http://stuwww.hsu.edu/kswh/2008/liveschedule3.html" and below is part of the code you have.

<BODY onLoad="getSchedule(day)">

<script type="text/javascript">
document.write(getSchedule(day));
</script>
<div id='sch' onClick="getSchedule(day)">Click For Now On KSWH</div>
</body>

Just trying to help you out here but I assume you are a little new to Javascript. You may need to read some basic tutorials.

<BODY onLoad="getSchedule(day)">
<div id='sch' onClick="getSchedule(day)">
document.write(getSchedule(day)

You are calling the getSchedule function incorrectly. When you are calling a function, you need to pass actual value in the parameters. In the above two lines, "day" is not an actual value that you are passing in. You also don't have a variable named "day" in the scope that contains the expected value. It will only work if you pass the expected values which is integers 1 to 5, because that's what the getSchedule function is expecting.

I don't know whether you want to have the schedule show up when the body loads or what, but the following should work.

<script type=text/javascript>
function load()
{
var date = new Date() ;
var today = date.getDay() ;
var schedule = getSchedule(today) ;
document.getElementById("sch").innerHTML = schedule ;
}
</script>

Now, you can call the load function like this to have this show up automatically when your body loads

<BODY onLoad="load()">
<div id='sch'></div>
</body>

theshock

03-14-2009, 02:35 PM

I am too using this script and i would like it to just appear on my page who is on air instead of having to click on it to display it.

How would i do that?

Mack

05-07-2010, 10:28 AM

Sorry to Dig up an old thread..

This script works perfect for what i need it for.. however in IE i get the following error (see attached).. it works fine in Chrome and Firefox.. just getting that little annoying error in the status bar in IE and would love to know how to fix it :-)

Thanks all
Mack

Mack

05-07-2010, 10:47 AM

here is the error....

Message: 'document.getElementById(...)' is null or not an object
Line: 54
Char: 1
Code: 0

thanks

DjHavick

06-24-2011, 05:41 PM

Hi Guys and Girls love the script but i have one question when I have no show on the script it shows

Fri Jun 24 2011 13:33:15 GMT-0700 (PST)

Non STOP OutRage

__

I like that but i don't wont the date and time there all i wont is the Non STOP OutRage text
how can I take the time date out ??

Thanks for your help