Jump to content

Welcome to Geeks to Go - Register now for FREE

Need help with your computer or device? Want to learn new tech skills? You're in the right place!
Geeks to Go is a friendly community of tech experts who can solve any problem you have. Just create a free account and post your question. Our volunteers will reply quickly and guide you through the steps. Don't let tech troubles stop you. Join Geeks to Go now and get the support you need!

How it Works Create Account
Photo

Javascript Timetable

Started by Linden , Mar 11 2007 08:44 PM

  • Please log in to reply

#1
Linden
Posted 11 March 2007 - 08:44 PM

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
Posted 11 March 2007 - 09:04 PM

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
Posted 15 March 2007 - 06:23 AM

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
Posted 15 March 2007 - 12:39 PM

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
Posted 15 March 2007 - 03:33 PM

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
Posted 18 March 2007 - 03:10 AM

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
Posted 18 March 2007 - 09:29 PM

Linden

    Member

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

#8
Major Payne
Posted 18 March 2007 - 11:14 PM

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
Posted 21 March 2007 - 03:02 AM

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
Posted 27 March 2007 - 05:52 PM

Linden

    Member

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

#11
Linden
Posted 29 March 2007 - 03:32 AM

Linden

    Member

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

#12
Major Payne
Posted 03 April 2007 - 10:56 AM

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
Posted 04 April 2007 - 07:52 PM

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
Posted 01 May 2007 - 07:55 AM

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
Back to Web Development · Next Unread Topic →




Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

  1. Geeks to Go Community
  2. → Development
  3. → Web Development

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP