Opened by Danwe at 2007-09-04 13:16
User since
2006-06-09
76 Artikel
BenutzerIn
![[default_avatar]](/battie/theme/default/default_avatar.gif)
2006-06-09
76 Artikel
BenutzerIn
Na, gut, dann poste ich mal die gesammte Haupt-JS-Funktion:
Die Tabelle an sich steht in einem Frameset, oben stehen die Tage u. Monate des Jahres u. Links stehen 20 Namen, in den Zellen Stehen kurze Infos. das Linke Frame ist die Tabelle mit den Namen u. die Rechte ist die mit den ganzen Tagen, also eine sehr kleine u. eine 400kb große Tabelle.
also ein Ausschnitt aus der großen, in der auch das JS arbeitet. Das Frame heist "right", wie man im JS schon erahnen kann:
usw. usw.... (die Kalenderwochen...), mit colspan natürlich.
Dann folgen untendrunter 12 Monats-colspans. Anschließend 2 Reihen, die jeweils eine Zelle pro Tag im Jahr haben, einmal für Wochentag-Namen u. einmal Datums-ziffer.
Anschließend kommen die ganzen Personen-Reihen:
was abgeschlossen wird mit einem </tr>:
Ganz am Ende folgt dann das
Das war die Daten-Tabelle.
Hier noch das Frameset:
Code: (dl
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
function ZeitAuswertung()
{
//right.document.getElementById("Babel").
var d = new Date();
var dmonth = d.getMonth();
var todaysDay = 0;
var monate=new Array
("Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember");
var monateTage=new Array
(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 );
if((d.getFullYear() % 4) == 0)
monateTage[1]++; //Schaltjahr, Februar +1 Tag
//Heutigen Tag berechnen:
for(i=0; i < d.getMonth(); i++)
{
todaysDay += monateTage[i];
}
todaysDay += d.getDate();
//-------------------------
//Aktuellen Tag farblich markieren u. Anker hinzufügen:
var daysRow = right.document.getElementById("Num");
var todayCell = daysRow.getElementsByTagName("td")[todaysDay-1];
todayCell.className = "ActiveDay";
//Anker erstellen:
var newAnker = document.createElement("a");
var newAnkerName = document.createAttribute("Name");
newAnker.name = "Today"; //Ankername "Today"
//alert(todayCell.tagName + '\nHTML:' + todayCell.innerHTML);
todayCell.appendChild(newAnker); //Anker für aktuellen Tag setzen
daysRow = right.document.getElementById("WT");
todayCell = daysRow.getElementsByTagName("td")[todaysDay-1];
todayCell.className = "ActiveDay";
//right.document.getElementsByName(monate[dmonth])[0].className = "ActiveDay";
//-------------------------
//Zum Tag springen:
right.scrollTo(99999999, 0); //Gaaaaanz nach rechts scrollen damit dann von hinten zum Anker gesprungen werden kann
window.right.location.href=('DatenTabelle.html#' + 'Today'); //Den aktuellen Tag anspringen
if (d.getMonth()+1 < 11) //Wenn NICHT Dezember (Dezember ist auf Bildschirm ganz links)
{
right.scrollTo(right.pageXOffset - right.innerWidth/2 + innerWidth/7, 0); //So springen dass aktueller Tag zentriert auf Bildschirm sichtbar
}
else if (d.getDate() < 17) // ab dem 17. Dezember ist letzter Tag im Jahr auf Bildschirm sichtbar
{
right.scrollTo(right.pageXOffset - right.innerWidth / 4, 0);
}
//-------------------------
//alert("Ok");
}
Die Tabelle an sich steht in einem Frameset, oben stehen die Tage u. Monate des Jahres u. Links stehen 20 Namen, in den Zellen Stehen kurze Infos. das Linke Frame ist die Tabelle mit den Namen u. die Rechte ist die mit den ganzen Tagen, also eine sehr kleine u. eine 400kb große Tabelle.
also ein Ausschnitt aus der großen, in der auch das JS arbeitet. Das Frame heist "right", wie man im JS schon erahnen kann:
Code: (dl
)
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>
<html>
<head>
<script src='functions.js' type='text/javascript'></script>
<link rel='stylesheet' href='styles.css' type='text/css' />
</head>
<body onScroll='parent.scrollen()'>
<table id='DatenTabelle' border='0' cellpadding='3' cellspacing='0'><tbody>
<tr class='week' id='KW'>
<td style='background-color: #78AABE' colspan='7'>1</td>
<td style='background-color: #78AABE' colspan='7'>2</td>
<td style='background-color: #78AABE' colspan='7'>3</td>
usw. usw.... (die Kalenderwochen...), mit colspan natürlich.
Code: (dl
)
1
2
3
<td style='background-color: #78AABE' colspan='7'>52</td>
<td style='background-color: #78AABE'>1</td>
</tr>
Dann folgen untendrunter 12 Monats-colspans. Anschließend 2 Reihen, die jeweils eine Zelle pro Tag im Jahr haben, einmal für Wochentag-Namen u. einmal Datums-ziffer.
Anschließend kommen die ganzen Personen-Reihen:
Code: (dl
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<tr id='Mr. XYZ'>
<td style='background-color: #FFCC99'></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td style='background-color: #FFCC99'></td>
<td style='background-color: #FFCC99'></td>
<td class='week' style='background-color: #B3A9CF' title='Berufsschule'>BS</td>
<td style='background-color: #B3A9CF' title='Dies und das'>BS</td>
<td style='background-color: #B3A9CF' title='Dies und das'>BS</td>
<td style='background-color: #B3A9CF' title='Dies und das'>BS</td>
<td style='background-color: #B3A9CF' title='Dies und das'>BS</td>
<td style='background-color: #FFCC99'></td>
was abgeschlossen wird mit einem </tr>:
Code: (dl
)
1
2
3
<td style='background-color: #FFCC99'></td>
<td class='week' style='background-color: #CDCDCD'></td>
</tr>
Ganz am Ende folgt dann das
Code: (dl
)
</tbody></table></body></html>
Das war die Daten-Tabelle.
Hier noch das Frameset:
Code: (dl
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<script src="functions.js" type="text/javascript"></script>
<title>Einsatztabelle 2008</title>
</head>
<frameset rows="40,*,50" frameborder="0" framespacing="0" border="0">
<frame src="Monatauswahl.html" name="top" scrolling="no" marginwidth="0" marginheight="0"/>
<frameset cols="100,*" frameborder="0" framespacing="0" border="0">
<frameset rows="*,17" frameborder="0" framespacing="0" border="0">
<frame src="BezeichnungsSpalte.html" name="left" scrolling="no" marginwidth="0" marginheight="0" />
<frame src="void.html" name="void" scrolling="no" marginwidth="0" marginheight="0" />
</frameset>
<frame onLoad="ZeitAuswertung()" src="DatenTabelle.html" name="right" marginwidth="0" marginheight="0" noresize frameborder="0" />
</frameset>
<frame src="Legende.html" name="bottom" scrolling="no" marginwidth="0" marginheight="0">
</frameset>
</html>