Hide div unless it's a certain day and time

[theconvo]

Here is what I am trying to do:

I need to hide a DIV with the id of "LivePlayerDiv" unless the time is between 8:30pm and 9:30pm Pacific Time on Tuesday and Thursday nights, when I need it to show (it's a live feed for an internet radio show). You can see the current page with the DIV always visible here: http://www.the-convo.com (the DIV is the Live Feed section at the top of the left column)

I'm new to JavaScript (although I have dabbled in ActionScript) and am having a tough time wrapping my head around the coding. Any and all help is greatly appreciated!

[Kor]

You need first to get the server's time, not the user's time, right? Now, which server languages supports that server host service? PHP, ASP? Other?

[theconvo]

OK, through some trial, error and endless self-teaching I have come up with the following code for my problem:

<script type="text/javascript">
var rightNow = new Date();

var day = rightNow.getUTCDay();
var hour = rightNow.getUTCHours();
var minute = rightNow.getUTCMinutes();

var newDisplay = 'none'; // unless we see otherwise
if(day == 3 || day==5) { // if we're on the air these days
if((hour==3 && minute >= 30) || (hour==4 && minute <= 30))
newDisplay = 'block';
}
document.getElementById('LivePlayerDiv').style.display = newDisplay;
</script>

Now, that works fine if I have it write something to the page, but no matter what I try, it won't hide the DIV (named 'LivePlayerDiv').

What am I doing wrong?

[Kor]

you try to refer an element (the DIV) before it was loaded, as the loading process is sequential, from top to bottom. Nest your code in a function a launch it after the window Global was loaded (window.onload).

<script type="text/javascript">
onload=function(){
var rightNow = new Date();
var day = rightNow.getUTCDay();
var hour = rightNow.getUTCHours();
var minute = rightNow.getUTCMinutes();
var newDisplay = 'none'; // unless we see otherwise
if(day == 3 || day==5) { // if we're on the air these days
if((hour==3 && minute >= 30) || (hour==4 && minute <= 30))
newDisplay = 'block';
}
document.getElementById('LivePlayerDiv').style.display = newDisplay;
}
</script>

[theconvo]

you try to refer an element (the DIV) before it was loaded, as the loading process is sequential, from top to bottom. Nest your code in a function a launch it after the window Global was loaded (window.onload).

<script type="text/javascript">
onload=function(){
var rightNow = new Date();
var day = rightNow.getUTCDay();
var hour = rightNow.getUTCHours();
var minute = rightNow.getUTCMinutes();
var newDisplay = 'none'; // unless we see otherwise
if(day == 3 || day==5) { // if we're on the air these days
if((hour==3 && minute >= 30) || (hour==4 && minute <= 30))
newDisplay = 'block';
}
document.getElementById('LivePlayerDiv').style.display = newDisplay;
}
</script>

Works beautifully. Thanks Kor!

I couldn't get it to work at first, but then I realized that I was trying to hide a section of a table, which apparently it doesn't like. But after nesting the section in it's own table and trying to hide that, it worked like a charm.

[jschrader]

First off, I am not familiar much with using the UTC times, so I switched to basic getDay, getHours, etc just to get something working, but I am unable to get this to work... I cant tell that Im doing anything diff that the first one on this thread... Times need to be M-F from 8:00 am - 6:00 pm

<script type="text/javascript">
onload=function(){
var rightNow = new Date();
var day = rightNow.getDay();
var hour = rightNow.getHours();
var newDisplay = 'none'; // unless we see otherwise

if(day==1 || day==2 || day==3 || day==4 || day==5) { // days chat is available
if((hour>= 8) || (hour<= 18))
newDisplay = 'block';
}
document.getElementById('ChatForm').style.display = newDisplay;
}
</script>

<DIV id="ChatForm" style="display:inline;"></DIV>

[Philip M]

You have confused your OR with your AND.
if((hour>= 8) || (hour<= 18))
Any number sastifies that condition.


<script type="text/javascript">
onload=function(){
var rightNow = new Date();
var day = rightNow.getDay();
var hour = rightNow.getHours();
var newDisplay = 'none'; // unless we see otherwise
if(day==1 || day==2 || day==3 || day==4 || day==5) { // days chat is available
if((hour>= 8) && (hour<= 18)) {
newDisplay = 'block';
}
}
document.getElementById('ChatForm').style.display = newDisplay;
}
</script>

<DIV id="ChatForm" style="display:inline;">Something Here</DIV>


Quizmaster: According to legend, who shot an apple off the top of his son's head?
Contestant: Was it Isaac Newton?

[adios]

Just fyi:

CSS display, for tables, has some unique values (http://www.htmldog.com/reference/cssproperties/display/).