PDA

View Full Version : How to set up an editable timetable which changes in relation to day.



peekj
Mar 11th, 2010, 10:33 AM
Hey everyone :)
First off - Thanks for looking :)
Just a note about me, I am very new to coding - and I have a feeling what im about to ask will require a lot of it... So please be patient with me

Anyway!

I am custom designing my own homepage, I havenít decided yet to run it locally or online, but the main idea of this page is to allow me access to the things I use most and have commonly used items on it.
Here's a quick site plan:
http://b.imagehost.org/t/0451/websitelayout.jpg (http://b.imagehost.org/download/0451/websitelayout)
For a key:
Red = Title/some space at the top
Blue = Navigation (1 or 2 supplementary pages)
Grey = Links column
Dark Grey = 'icons' used to identify links

On to my question:
In that timetable on that page, I wish to create something

Displays the date above it along with a link the the other week
That isnít hard to add columns or rows to
Which Highlights the current Days column
Which Determines week number(even/A or odd/B)
And i think you can mostly see anything else from the picture


My friend suggested that i should use Div tables - How do you think i should go about coding this ?:confused: :)
Thanks

[Edit: I do realise my grammar in the title is wrong, i must have missed it whilst flipping between titles]

VIPStephan
Mar 11th, 2010, 12:16 PM
Well, well, I think you’re trying to do the third step before the first one. This is kind of an advanced application you wanna create, nothing for a beginner. I don’t know any but I guess there are some pre-made scripts out there that have the functionality you want (at least partly) which you can use.

And what are “div tables”?

abduraooft
Mar 11th, 2010, 12:20 PM
PS:
[Edit: I do realise my grammar in the title is wrong, i must have missed it whilst flipping between titles]
Last edited by peekj; 03-11-2010 at 03:09 PM.. Reason: Spelling You may change it easily by opting "Advanced edit" after clicking the "Edit" button.

peekj
Mar 13th, 2010, 12:33 AM
@abduraooft Thanks for the hint :)

@VIPStephan I meant making a table from <div>

Heres what i have so far (Just Timetable Half)
Its just Divs + JS switch statement


<div id="monday" style="background-color:blue; position:absolute; left:10px; top:40px; height:225px; width:90px;">
<div style="position:absolute; top:2px;">Monday</div>
<div id="p1" style="position:absolute; left:5px; top:25px; height:30px;">SoR</div>
<div id="p2" style="position:absolute; left:5px; top:55px; height:30px;">Biology</div>
<div id="p3" style="position:absolute; left:5px; top:85px; height:30px;">Economics</div>
<div id="p4" style="position:absolute; left:5px; top:115px; height:30px;">Maths</div>
<div id="p5" style="position:absolute; left:5px; top:145px; height:30px;">Tutor</div>
<div id="p5" style="position:absolute; left:5px; top:175px; height:30px;">Study Period</div>
<div id="p6" style="position:absolute; left:5px; top:205px; height:30px;">English</div>
</div>

<div id="tuesday" style="background-color:blue; position:absolute; left:110px; top:40px; height:225px; width:90px;">
<div style="position:absolute; top:2px;">Tuesday</div>
<div id="p1" style="position:absolute; left:5px; top:25px; height:30px;">SoR</div>
<div id="p2" style="position:absolute; left:5px; top:55px; height:30px;">Biology</div>
<div id="p3" style="position:absolute; left:5px; top:85px; height:30px;">Economics</div>
<div id="p4" style="position:absolute; left:5px; top:115px; height:30px;">Maths</div>
<div id="p5" style="position:absolute; left:5px; top:145px; height:30px;">Tutor</div>
<div id="p5" style="position:absolute; left:5px; top:175px; height:30px;">Study Period</div>
<div id="p6" style="position:absolute; left:5px; top:205px; height:30px;">English</div>
</div>

<div id="wednesday" style="background-color:blue; position:absolute; left:210px; top:40px; height:225px; width:90px;">
<div style="position:absolute; top:2px;">Wednesday</div>
<div id="p1" style="position:absolute; left:5px; top:25px; height:30px;">SoR</div>
<div id="p2" style="position:absolute; left:5px; top:55px; height:30px;">Biology</div>
<div id="p3" style="position:absolute; left:5px; top:85px; height:30px;">Economics</div>
<div id="p4" style="position:absolute; left:5px; top:115px; height:30px;">Maths</div>
<div id="p5" style="position:absolute; left:5px; top:145px; height:30px;">Tutor</div>
<div id="p5" style="position:absolute; left:5px; top:175px; height:30px;">Study Period</div>
<div id="p6" style="position:absolute; left:5px; top:205px; height:30px;">English</div>
</div>

<div id="thursday" style="background-color:blue; position:absolute; left:310px; top:40px; height:225px; width:90px;">
<div style="position:absolute; top:2px;">Thursday</div>
<div id="p1" style="position:absolute; left:5px; top:25px; height:30px;">SoR</div>
<div id="p2" style="position:absolute; left:5px; top:55px; height:30px;">Biology</div>
<div id="p3" style="position:absolute; left:5px; top:85px; height:30px;">Economics</div>
<div id="p4" style="position:absolute; left:5px; top:115px; height:30px;">Maths</div>
<div id="p5" style="position:absolute; left:5px; top:145px; height:30px;">Tutor</div>
<div id="p5" style="position:absolute; left:5px; top:175px; height:30px;">Study Period</div>
<div id="p6" style="position:absolute; left:5px; top:205px; height:30px;">English</div>
</div>

<div id="friday" style="background-color:blue; position:absolute; left:410px; top:40px; height:225px; width:90px;">
<div style="position:absolute; top:2px;">Friday</div>
<div id="p1" style="position:absolute; left:5px; top:25px; height:30px;">SoR</div>
<div id="p2" style="position:absolute; left:5px; top:55px; height:30px;">Biology</div>
<div id="p3" style="position:absolute; left:5px; top:85px; height:30px;">Economics</div>
<div id="p4" style="position:absolute; left:5px; top:115px; height:30px;">Maths</div>
<div id="p5" style="position:absolute; left:5px; top:145px; height:30px;">Tutor</div>
<div id="p5" style="position:absolute; left:5px; top:175px; height:30px;">Study Period</div>
<div id="p6" style="position:absolute; left:5px; top:205px; height:30px;">English</div>
</div>

<div id="saturday" style="background-color:blue; position:absolute; left:510px; top:40px; height:225px; width:90px;">
<div style="position:absolute; top:2px;">Saturday</div>
<div id="p1" style="position:absolute; left:5px; top:25px; height:30px;"> _ </div>
<div id="p2" style="position:absolute; left:5px; top:55px; height:30px;">Sport</div>
<div id="p3" style="position:absolute; left:5px; top:85px; height:30px;"> </div>
<div id="p4" style="position:absolute; left:5px; top:115px; height:30px;"> _ </div>
<div id="p5" style="position:absolute; left:5px; top:145px; height:30px;">Homework</div>
<div id="p5" style="position:absolute; left:5px; top:175px; height:30px;"> _ </div>
<div id="p6" style="position:absolute; left:5px; top:205px; height:30px;">Study</div>
</div>

<div id="sunday" style="background-color:blue; position:absolute; left:610px; top:40px; height:225px; width:90px;">
<div style="position:absolute; top:2px;">Sunday</div>
<div id="p1" style="position:absolute; left:5px; top:25px; height:30px;"> _ </div>
<div id="p2" style="position:absolute; left:5px; top:55px; height:30px;">Sport</div>
<div id="p3" style="position:absolute; left:5px; top:85px; height:30px;"> </div>
<div id="p4" style="position:absolute; left:5px; top:115px; height:30px;"> _ </div>
<div id="p5" style="position:absolute; left:5px; top:145px; height:30px;">Homework</div>
<div id="p5" style="position:absolute; left:5px; top:175px; height:30px;"> _ </div>
<div id="p6" style="position:absolute; left:5px; top:205px; height:30px;">Study</div>
</div>


<script>

function $(id) {
return document.getElementById(id); }

var d = new Date;
var day = d.getDay();

function init() {
switch(day) {
case 1: {
$("monday").style.backgroundColor = "red";
break; }
case 2: {
$("tuesday").style.backgroundColor = "red";
break; }
case 3: {
$("wednesday").style.backgroundColor = "red";
break; }
case 4: {
$("thursday").style.backgroundColor = "red";
break; }
case 5: {
$("friday").style.backgroundColor = "red";
break; }
case 6: {
$("saturday").style.backgroundColor = "red";
break; }
case 7: {
$("sunday").style.backgroundColor = "red";
break; } } }

window.onload = init;

</script>


I have a slight problem in the fact that when i change anything which runs over two lines it messes the whole table up... Any easy fix?

Also now my main obstacle to over come is how to make the table turn into the other week when it is required...
Im not sure how to attack that, because the js switch deals with the background colour, it cant change the content ... can it?
My other obstacle is how to get it to change when the user clicks on the alternate week link