Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

Javascript Timetable


  • Please log in to reply

#1
Linden

Linden

    Member

  • Member
  • PipPip
  • 57 posts
Hey,
I want to create a simple time table that would highlight the day and the period that you are in based on the systems time.
Thanks in advance.

-Linden.
  • 0

Advertisements


#2
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Is this just a date/time clock setup you want for your web page?

Ron
  • 0

#3
Linden

Linden

    Member

  • Topic Starter
  • Member
  • PipPip
  • 57 posts
It will just be a table that highlights the day/period you are in.
  • 0

#4
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
I understand "day" and "period", but your description leaves me confused. I can give you a day/date for your web page, possibly combine two to get you a week's list of days/time that will be with different colored backgrounds for each day. A little more description or link to an example would help.

Will put what I have up on my site and let you see the current selection.

Ron
  • 0

#5
Linden

Linden

    Member

  • Topic Starter
  • Member
  • PipPip
  • 57 posts
I mean I need all the tables cells backgrounds to be white. Then by the computers time, it will highlight in orange the cell "period" you are in.
Is that better? =\
  • 0

#6
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Haven't forgotten you. Had to stop working on it to do other work.

Ron
  • 0

#7
Linden

Linden

    Member

  • Topic Starter
  • Member
  • PipPip
  • 57 posts
Cool, Thankyou :whistling:
  • 0

#8
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Hey, attaching unfinished script that isn't working. Maybe someone can modify it more to get it going for you.

Ron
  • 0

#9
Linden

Linden

    Member

  • Topic Starter
  • Member
  • PipPip
  • 57 posts

Hey, attaching unfinished script that isn't working. Maybe someone can modify it more to get it going for you.

Ron


Thanks :whistling:
I would love to see this working.
  • 0

#10
Linden

Linden

    Member

  • Topic Starter
  • Member
  • PipPip
  • 57 posts
=D Could someone please get this working ^_^.
  • 0

#11
Linden

Linden

    Member

  • Topic Starter
  • Member
  • PipPip
  • 57 posts
I want it working :'(
  • 0

#12
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Try this out (rewritten):

<table id="cell" align="center" style="background-color: #ffffff; border: 2px solid #ff0000;" summary="">
<tr>
<td id="cell1"> Cell One </td>
</tr>
<tr>
<td id="cell2"> Cell Two </td>
</tr>
<tr>
<td id="cell3"> Cell Three </td>
</tr>
<tr>
<td id="cell4"> Cell Four </td>
</tr>
<tr>
<td id="cell5"> Cell Five </td>
</tr>
<tr>
<td id="cell6"> Cell Six </td>
</tr>
<tr>
<td id="cell7"> Cell Seven </td>
</tr>
</table>

<script type="text/JavaScript" language="JavaScript">
<!--
var now = new Date();
var hours = now.getHours();
var cell;

//18-19 night
if (hours > 17 && hours < 20){
cell = document.getElementById('cell1')
}
//20-21 night
if (hours > 19 && hours < 22){
cell = document.getElementById('cell2')
}
//22-4 night
if (hours > 21 || hours < 5){
cell = document.getElementById('cell3')
}
//9-17 day
if (hours > 8 && hours < 18){
cell = document.getElementById('cell4')
}
//7-8 day
if (hours > 6 && hours < 9){
cell = document.getElementById('cell5')
}
//5-6 day
if (hours > 4 && hours < 7){
cell = document.getElementById('cell6')
}
cell.style.backgroundColor = "ff6633";
// -->
</script>

Ron
  • 0

#13
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts

I want it working :'(

Let me know if you're having problems. It's working fine for me in both FF and IE.

Ron
  • 0

#14
Linden

Linden

    Member

  • Topic Starter
  • Member
  • PipPip
  • 57 posts
Okay, I changed a few things, and this is how I want it to work :whistling:, can you please make this work.
Thanks.

<head>
<meta http-equiv="Content-Language" content="en-au">
</head>

<body bgcolor="#000000">
<font face="Tahoma">
<table border="1" width="631" height="208" bordercolorlight="#000080" bordercolordark="#000080" style="border-collapse: collapse">
<tr>
<td width="101" height="23" align="center"><font color="#008000"><b>Time</b></font></td>
<td width="64" height="23" align="center"><font color="#008000"><b>Monday</b></font></td>
<td width="69" height="23" align="center"><font color="#008000"><b>Tuesday</b></font></td>
<td width="94" height="23" align="center"><font color="#008000"><b>Wednesday</b></font></td>
<td width="76" height="23" align="center"><font color="#008000"><b>Thursday</b></font></td>
<td width="60" height="23" align="center"><font color="#008000"><b>Friday</b></font></td>
<td width="74" height="23" align="center"><font color="#008000"><b>Saturday</b></font></td>
<td width="61" height="23" align="center"><font color="#008000"><b>Sunday</b></font></td>
</tr>
<tr>
<td width="101" height="24" align="center"><font color="#008080">8:30 - 9:30</font></td>
<td width="64" height="24" align="center"><font color="#008080" id="cella1">Period 1</font></td>
<td width="69" height="24" align="center"><font color="#008080" id="cella2">Period 1</font></td>
<td width="94" height="24" align="center"><font color="#008080" id="cella3">Period 1</font></td>
<td width="76" height="24" align="center"><font color="#008080" id="cella4">Period 1</font></td>
<td width="60" height="24" align="center"><font color="#008080" id="cella5">Period 1</font></td>
</font>
<font face="Thaoma">
<td width="74" rowspan="8" align="center">&nbsp;</td>
<td width="61" rowspan="8" align="center">&nbsp;</td>
</tr>
</font>
<font face="Tahoma">
<tr>
<td width="101" height="24" align="center"><font color="#008080" face="Tahoma">9:30 - 10:30</font></td>
<td width="64" height="24" align="center"><font color="#008080" face="Tahoma" id="cellb1">Period 2</font></td>
<td width="69" height="24" align="center"><font color="#008080" face="Tahoma" id="cellb2">Period 2</font></td>
<td width="94" height="24" align="center"><font color="#008080" face="Tahoma" id="cellb3">Period 2</font></td>
<td width="76" height="24" align="center"><font color="#008080" face="Tahoma" id="cellb4">Period 2</font></td>
<td width="60" height="24" align="center"><font color="#008080" face="Tahoma" id="cellb5">Period 2</font></td>
</tr>
<tr>
<td width="101" height="24" align="center"><font color="#008080" face="Tahoma">10:30 - 11:00</font></td>
<td width="64" height="24" align="center"><font color="#008080" face="Tahoma" id="cellc1">Recess</font></td>
<td width="69" height="24" align="center"><font color="#008080" face="Tahoma" id="cellc2">Recess</font></td>
<td width="94" height="24" align="center"><font color="#008080" face="Tahoma" id="cellc3">Recess</font></td>
<td width="76" height="24" align="center"><font color="#008080" face="Tahoma" id="cellc4">Recess</font></td>
<td width="60" height="24" align="center"><font color="#008080" face="Tahoma" id="cellc5">Recess</font></td>
</tr>
<tr>
<td width="101" height="24" align="center"><font color="#008080" face="Tahoma">11:00 -11:15</font></td>
<td width="64" height="24" align="center"><font color="#008080" face="Tahoma" id="celld1">Tutorial</font></td>
<td width="69" height="24" align="center"><font color="#008080" face="Tahoma" id="celld2">Tutorial</font></td>
<td width="94" height="24" align="center"><font color="#008080" face="Tahoma" id="celld3">Tutorial</font></td>
<td width="76" height="24" align="center"><font color="#008080" face="Tahoma" id="celld4">Tutorial</font></td>
<td width="60" height="24" align="center"><font color="#008080" face="Tahoma" id="celld5">Tutorial</font></td>
</tr>
<tr>
<td width="101" height="24" align="center"><font color="#008080" face="Tahoma">11:15 - 12:15</font></td>
<td width="64" height="24" align="center"><font color="#008080" face="Tahoma" id="celle1">Period 3</font></td>
<td width="69" height="24" align="center"><font color="#008080" face="Tahoma" id="celle2">Period 3</font></td>
<td width="94" height="24" align="center"><font color="#008080" face="Tahoma" id="celle3">Period 3</font></td>
<td width="76" height="24" align="center"><font color="#008080" face="Tahoma" id="celle4">Period 3</font></td>
<td width="60" height="24" align="center"><font color="#008080" face="Tahoma" id="celle5">Period 3</font></td>
</tr>
<tr>
<td width="101" height="24" align="center"><font color="#008080" face="Tahoma">12:15 - 1:15</font></td>
<td width="64" height="24" align="center"><font color="#008080" face="Tahoma" id="cellf1">Period 4</font></td>
<td width="69" height="24" align="center"><font color="#008080" face="Tahoma" id="cellf2">Period 4</font></td>
<td width="94" height="24" align="center"><font color="#008080" face="Tahoma" id="cellf3">Period 4</font></td>
<td width="76" height="24" align="center"><font color="#008080" face="Tahoma" id="cellf4">Period 4</font></td>
<td width="60" height="24" align="center"><font color="#008080" face="Tahoma" id="cellf5">Period 4</font></td>
</tr>
<tr>
<td width="101" height="24" align="center"><font color="#008080" face="Tahoma">1:15 - 1:45</font></td>
<td width="64" height="24" align="center"><font color="#008080" face="Tahoma" id="cellg1">Lunch</font></td>
<td width="69" height="24" align="center"><font color="#008080" face="Tahoma" id="cellg2">Lunch</font></td>
<td width="94" height="24" align="center"><font color="#008080" face="Tahoma" id="cellg3">Lunch</font></td>
<td width="76" height="24" align="center"><font color="#008080" face="Tahoma" id="cellg4">Lunch</font></td>
<td width="60" height="24" align="center"><font color="#008080" face="Tahoma" id="cellg5">Lunch</font></td>
</tr>
<tr>
<td width="101" height="25" align="center"><font color="#008080" face="Tahoma">1:45 - 2:50</font></td>
<td width="64" height="25" align="center"><font color="#008080" face="Tahoma" id="cellh1">Period 5</font></td>
<td width="69" height="25" align="center"><font color="#008080" face="Tahoma" id="cellh2">Period 5</font></td>
<td width="94" height="25" align="center"><font color="#008080" face="Tahoma" id="cellh3">Period 5</font></td>
<td width="76" height="25" align="center"><font color="#008080" face="Tahoma" id="cellh4">Period 5</font></td>
<td width="60" height="25" align="center"><font color="#008080" face="Tahoma" id="cellh5">Period 5</font></td>
</tr>
</table>
</font>
<font face="Thaoma">
<p><span style="background-color: #FF0000">&nbsp;&nbsp;&nbsp;
<script type="text/javascript">
<!--
var Eps = new Date()
var day = Eps.getDay()
var hours = Eps.getHours()
var mins = Eps.getMinutes()

if (hours >= 8 && hours <= 8 && mins >= 30 && mins <= 59){
cell = document.getElementById('cella'+day')
}
if (hours >= 9 && hours <= 9 && mins >= 0 && mins <= 30){
cell = document.getElementById('cella'+day')
}
if (hours >= 9 && hours <= 9 && mins >= 30 && mins <= 59){
cell = document.getElementById('cellb'+day')
}
if (hours >= 10 && hours <= 10 && mins >= 0 && mins <= 30){
cell = document.getElementById('cellb'+day')
}
if (hours >= 10 && hours <= 10 && mins >= 30 && mins <= 59){
cell = document.getElementById('cellc'+day')
}
if (hours >= 11 && hours <= 11 && mins >= 0 && mins <= 15){
cell = document.getElementById('celld'+day')
}
if (hours >= 11 && hours <= 11 && mins >= 15 && mins <= 59){
cell = document.getElementById('celle'+day')
}
if (hours >= 12 && hours <= 12 && mins >= 0 && mins <= 15){
cell = document.getElementById('celle'+day')
}
if (hours >= 12 && hours <= 12 && mins >= 15 && mins <= 59){
cell = document.getElementById('cellf'+day')
}
if (hours >= 13 && hours <= 13 && mins >= 0 && mins <= 15){
cell = document.getElementById('cellf'+day')
}
if (hours >= 13 && hours <= 13 && mins >= 15 && mins <= 45){
cell = document.getElementById('cellg'+day')
}
if (hours >= 13 && hours <= 23 && mins >= 0 && mins <= 59){
cell = document.getElementById('cellh'+day')
}
cell.style.backgroundColor = "FF0000";

//-->
</script>&nbsp;&nbsp;&nbsp;&nbsp; </span>&nbsp;<font color="#FFFFFF">= The
Period you are currently in.</font></p>

Edited by Linden, 01 May 2007 - 07:55 AM.

  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP