nicht angemeldet
Zwei Scripts zu einen?
Hallo,
ich bin totaler Anfänger in Sachen Javascript und möchte hiermit euch um Hilfe bitten.
Ich habe 2 verschiedene Javascripts aufgelistet. Mein Ziel ist es, dass ich die "Anstehenden Termine" im 1. JS gerne anklicken möchte und sich daraufhin Unterpunkte öffnen (siehe 2. JS), wie z.B. Beginn der Veranstaltung etc. Dabei sollen aber weiterhin Termine, die abgelaufen sind, nicht mehr angezeigt werden.
Das Problem ist, dass im 2. JS die Oberpunkte beim Aufruf der Seite schon geöffnet sind. Diese sollen aber erst beim Klick sich öffnen.
Kann mir jemand behilflich sein? Vielen Dank.
<!--Script_1_beginn-->
<script type="text/javascript">
// <![CDATA[
function aktualisieren() {
if (!document.getElementsByTagName) return;
var Datum = new Date();
var Jahr = Datum.getFullYear().toString();
var Monat = (Datum.getMonth()+1).toString();
if (Monat.length == 1) Monat = "0" + Monat;
var Tag = Datum.getDate().toString();
if (Tag.length == 1) Tag = "0" + Tag;
var aktuell = parseInt(Jahr + Monat + Tag);
var Zeilen = document.getElementsByTagName("div");
var Obergrenze = 4; var Rest = Obergrenze;
for (var i = 0; i < Zeilen.length; i++) {
if (Zeilen[i].id) {
if (parseInt(Zeilen[i].id) < aktuell) Zeilen[i].style.display = "none";
else if(Obergrenze) {
if(Rest) Rest--; else Zeilen[i].style.display = "none";
}
}
}
}
// ]]>
</script>
<body onload="aktualisieren();">
<b> <u>Anstehende Termine</u></b><br>
<table>
<tr>
<colgroup>
<col width="3">
<col width="217">
</colgroup>
<tr>
<td valign="top"><div id="20080101">• </div></td>
<td valign="top"><div id="20080101"><font color="#0000FF">08.02.2008 - Termin1</font></div></td>
</tr>
<tr>
<td valign="top"><div id="20080202">• </div></td>
<td valign="top"><div id="200800202">15.03.2008 - Termin2</div></td>
</tr>
<tr>
<td valign="top"><div id="20080303">• </div></td>
<td valign="top"><div id="20080303">11.04.2008 - Termin3</div></td>
</tr>
</tr>
</table>
</body>
<!--Script_1_ende-->
<!--Script_2_beginn-->
<script language="javascript">
function verstecken() {
for (var i = 1; i<=4; i++) {
e = document.getElementById('submenue'+i);
if (e) {
e.style.display="none";
}
}
}
function aufzu(id) {
e = document.getElementById(id);
if (e) {
d = e.style.display == "none" ? "block" : "none";
e.style.display = d;
}
}
</script>
<body onLoad="verstecken()">
<ul>
<li><a href="#" onClick="aufzu('submenue1'); return false">Oberpunkt 1</a></li>
<ul id="submenue1">
Unterpunkt 1.1
<li>Unterpunkt 1.2</li>
</ul>
<li><a href="#" onClick="aufzu('submenue2'); return false">Oberpunkt 2</a></li>
<li><a href="#" onClick="aufzu('submenue3'); return false">Oberpunkt 3</a></li>
<ul id="submenue3">
<li>Unterpunkt 3.1</li>
<li>Unterpunkt 3.2</li>
</ul>
</ul>
</body>
<!--Script_2_ende-->
-
Liebe(r) kai_world,
was hindert Dich daran, beide JavaScripte in ein und derselben HTML-Datei zu notieren? Was hindert Dich daran, zwei Funktionen nacheinander im onload-Attribut des <body>-Tags zu notieren?
Warum nennst Du ganze HTML-Dokumente "Script"s? Und was hat das eine HTML-Dokument inhaltlich mit dem anderen gemeinsam?
Wenn Du Dein Vorhaben genauer demonstrieren könntest, dann könnte Dir auch besser geholfen werden.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Lieber Felix,
was hindert Dich daran, beide JavaScripte in ein und derselben HTML-Datei zu notieren? Was hindert Dich daran, zwei Funktionen nacheinander im onload-Attribut des <body>-Tags zu notieren?
Folgendes: ich möchte auf meiner Website "Anstehende Termine" auf der Startseite anzeigen. Dazu habe ich das erste Javascript verwendet, wo immer 2 Termine gezeigt werden und Termine, die abgelaufen sind, sind unsichtbar. Ich will nun, dass die zwei angezeigten sichtbaren Termine anklickbar sind und man z.B. den Veranstaltungsort oder den Beginn der Veranstaltung sieht (deshalb Javascript zwei...). Diese sollen sich dann in Unterpunkte öffnen.
Mein Problem ist, dass beim Öffnen meiner HTML-Datei die Unterpunkte aus dem zweiten Javascript bereits schon sichtbar sind. Diese sollen sich aber erst beim Klick öffnen.Ich hoffe es ist jetzt einigermaßen verständlicher geworden.
Viele Grüße kai-
Lieber kai_world,
sorry, aber was Du da schreibst, ergibt irgendwie keinen Sinn!
ich möchte auf meiner Website "Anstehende Termine" auf der Startseite anzeigen.
Soweit klar.
Dazu habe ich das erste Javascript verwendet, wo immer 2 Termine gezeigt werden und Termine, die abgelaufen sind, sind unsichtbar.
Nein. Wenn ich Deine function aktualisieren() richtig deute, steht im HTML jede Menge Zeuch, welches nach dubiosen Kriterien (bei Dir kommen IDs doppelt vor - das ist nicht erlaubt!) auf unsichtbar geschaltet wird. Das bedeutet, Javascript zeigt nix an, sondern blendet lediglich aus, was schon da ist.
Ich will nun, dass die zwei angezeigten sichtbaren Termine anklickbar sind und man z.B. den Veranstaltungsort oder den Beginn der Veranstaltung sieht (deshalb Javascript zwei...). Diese sollen sich dann in Unterpunkte öffnen.
Das bedeutet, dass Du jeden Termin nicht in ein DIV, sondern in ein <a> setzen musst, dem Du dann auch ein gültiges Ziel ins href-Attribut schreibst.
Allerdings scheint mir Deine function verstecken() an völlig anderer Stelle im Dokument (in Deinem OP sind es zwei völlig verschiedene HTML-Dokumente, deren Strukturen absolut nichts miteinander zu tun haben), etwas von display:none auf display:block ändern zu sollen.
Mein Problem ist, dass beim Öffnen meiner HTML-Datei die Unterpunkte aus dem zweiten Javascript bereits schon sichtbar sind. Diese sollen sich aber erst beim Klick öffnen.
Welches HTML-Dokument meinst Du denn??? Du hast in Deinem einzigen Code-Beispiel zwei verschiedene HTMl-Dokumente gepostet, die absolut nichts miteinander zu tun haben!
Du weißt schon, dass ein HTML-Dokument nur einen <body> haben kann, und dass eine bereits vergebene ID in diesem Dokument nicht erneut vergeben werden darf?
Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Okay, pass mal auf. Ich habe schnell mal einen Script "entworfen".
Ich hoffe du verstehst was ich eigentlich will.<script type="text/javascript">
// <![CDATA[
function aktualisieren() {
if (!document.getElementsByTagName) return;
var Datum = new Date();
var Jahr = Datum.getFullYear().toString();
var Monat = (Datum.getMonth()+1).toString();
if (Monat.length == 1) Monat = "0" + Monat;
var Tag = Datum.getDate().toString();
if (Tag.length == 1) Tag = "0" + Tag;
var aktuell = parseInt(Jahr + Monat + Tag);
var Zeilen = document.getElementsByTagName("div");
var Obergrenze = 2; var Rest = Obergrenze;
for (var i = 0; i < Zeilen.length; i++) {
if (Zeilen[i].id) {
if (parseInt(Zeilen[i].id) < aktuell) Zeilen[i].style.display = "none";
else if(Obergrenze) {
if(Rest) Rest--; else Zeilen[i].style.display = "none";
}
}
}
}
// ]]>
</script><script language="javascript">
function verstecken() {
for (var i = 1; i<=4; i++) {
e = document.getElementById('submenue'+i);
if (e) {
e.style.display="none";
}
}
}function aufzu(id) {
e = document.getElementById(id);
if (e) {
d = e.style.display == "none" ? "block" : "none";
e.style.display = d;
}}
</script><body onload="aktualisieren();">
<body onLoad="verstecken()">
<b> <u>Anstehende Termine</u></b><br><table>
<tr>
<colgroup>
<col width="300">
<col width="100">
</colgroup><tr>
<td valign="top"><div id="20080404">
<ul>
<a href="#" onClick="aufzu('submenue1'); return false">04.04.2008 - Termin 1</a>
<ul id="submenue1">
<li>Beginn 15 Uhr</li>
<li>Ort: Berlin</li>
</ul>
</div></td>
</tr><tr>
<td valign="top"><div id="20080505">
<a href="#" onClick="aufzu('submenue2'); return false">05.05.2008 - Termin2</a>
<ul id="submenue2">
<li>Beginn 17 Uhr</li>
<li>Ort: Köln</li>
</ul>
</div></td>
</tr>
<tr><td valign="top"><div id="20080606">
<a href="#" onClick="aufzu('submenue3'); return false">06.06.2008 - Termin3</a>
<ul id="submenue3">
<li>Beginn 20 Uhr</li>
<li>Ort: München</li></ul>
</body>
</div></td>
</tr>
</tr>
</table>
</body>Vielleicht ist das absoluter Schwachsinn was ich da gemacht habe. Aber so wie es jetzt ist, will ich das ungefähr haben (NUR, dass sich die Unterpunkte erst beim Klick öffnen).
Es geht bestimmt einfacher oder??
Sorry, aber wie gesagt: ich bin totaler Anfänger....-
Lieber kai_world,
Vielleicht ist das absoluter Schwachsinn was ich da gemacht habe.
Du hast noch immer zwei <body>-Elemente in Deinem Quelltext, diesmal sogar ineinander verschachtelt. Das ist Quark! Korrigierter Quelltext hier:
<html> <head> <title>Test</title> <script type="text/javascript"> // <![CDATA[ function aktualisieren() { if (!document.getElementsByTagName) return; var Datum = new Date(); var Jahr = Datum.getFullYear().toString(); var Monat = (Datum.getMonth()+1).toString(); if (Monat.length == 1) Monat = "0" + Monat; var Tag = Datum.getDate().toString(); if (Tag.length == 1) Tag = "0" + Tag; var aktuell = parseInt(Jahr + Monat + Tag); var Zeilen = document.getElementsByTagName("div"); var Obergrenze = 2; var Rest = Obergrenze; for (var i = 0; i < Zeilen.length; i++) { if (Zeilen[i].id) { if (parseInt(Zeilen[i].id) < aktuell) Zeilen[i].style.display = "none"; else if (Obergrenze) { if (Rest) Rest = Rest-1; else Zeilen[i].style.display = "none"; } } } } function verstecken() { var e, i; for (i = 1; i<=4; i++) { e = document.getElementById('submenue'+i); if (e) { e.style.display="none"; } } } function aufzu(id) { var e = document.getElementById(id); if (e) { e.style.display = e.style.display == "none" ? "" : "none"; } } // ]]> </script> </head> <body onload="aktualisieren();verstecken();"> <b> <u>Anstehende Termine</u></b><br> <table> <tr> <td valign="top"><div id="20080404"> <a href="#" onclick="aufzu('submenue1'); return false">04.04.2008 - Termin 1</a> <ul id="submenue1"> <li>Beginn 15 Uhr</li> <li>Ort: Berlin</li> </ul> </div></td> </tr> <tr> <td valign="top"><div id="20080505"> <a href="#" onclick="aufzu('submenue2'); return false">05.05.2008 - Termin2</a> <ul id="submenue2"> <li>Beginn 17 Uhr</li> <li>Ort: Köln</li> </ul> </div></td> </tr> <tr> <td valign="top"><div id="20080606"> <a href="#" onclick="aufzu('submenue3'); return false">06.06.2008 - Termin3</a> <ul id="submenue3"> <li>Beginn 20 Uhr</li> <li>Ort: München</li> </ul> </div></td> </tr> </table> </body> </html>Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Arrrrgh, schon wieder zu frühg abgeschickt...
Wie Du siehst, habe ich nicht nur die HTML-Struktur korrigiert, sondern beide Script-Bereiche zu einem zusammengefasst. Dass ich dabei diverse Variablen mit "var" zu lokalen Variablen gemacht habe, war zwar sinnvoll, hier aber nicht so wichtig. Wie ich auch in meiner ersten Antwort geschrieben habe, musste das onload-Attribut des (einzigen!!!) <body>-Tags mit beiden Funktionsaufrufen befüllt werden.
Es geht bestimmt einfacher oder??
Sorry, aber wie gesagt: ich bin totaler Anfänger....Ja, es geht einfacher. Da Du die Listen (<ul>) innerhalb der Tabellenzelle hast, kannst Du vollkommen auf die DIVs verzichten. Ich bin sogar der Meinung, dass man sich darüber Gedanken machen könnte, ob eine Tabelle als Strukturelement unbedingt sein muss, denn Deine Termineliste ist ja eigentlich eine _Liste_... Und in einer Liste kannst Du dann das jeweilige <li>-Element als Elternelement für Deine Termine nehmen. Anstatt diesen Code
<table>
<tr>
<td valign="top"><div id="20080404">
<a href="#" onclick="aufzu('submenue1'); return false">04.04.2008 - Termin 1</a>
<ul id="submenue1">
<li>Beginn 15 Uhr</li>
<li>Ort: Berlin</li>
</ul>
</div></td>
</tr>kannst Du diesen nehmen:
<ul> <li class="termin"> <a href="#" onclick="return aufzu(this)" title="für Details anklicken...">04.04.2008 - Termin X</a> <ul class="zu"> <li>Beginn 15 Uhr</li> <li>Ort: Berlin</li> </ul> </li> <li class="termin"> <a href="#" onclick="return aufzu(this)" title="für Details anklicken...">05.04.2008 - Termin Y</a> <ul class="zu"> <li>Beginn 9.30 Uhr</li> <li>Ort: Hamburg</li> </ul> </li> </ul>Natürlich müssten dann alle Deine Funktionen umgeschrieben werden, aber der Code Deiner Seite würde dadurch wesentlich schlanker - und meiner Meinung nach auch semantischer.
Durch die Klassen ist auch das Aktualisieren ziemlich gut machbar, da man über die Klasse "termin" leicht an die jeweiligen <li>-Elemente kommt (im Forumsarchiv wurde schon des Öfteren eine Funktion getElementsByClassName vorgestellt), und da beim onclick das jeweilige angeklickte HTML-Element (<a>) übertragen wird, kann man dann über DOM-Methoden die im selben Elternelement (<li>) befindliche Liste (<ul>) behandeln und ihr eine andere Klasse zuweisen (z.B. mit
a.parentNode.getElementsByTagName("ul")[0]).Wenn die Klassen im CSS-Code vernünftig formatiert sind, erhälst Du genau das, was Du willst. Du kannst sogar mit Hintergrundbildern das Anklicken der Termine unterstützen!
Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Also das hat mich jetzt gereizt... ;-)
<ul>
<li class="termin">
<a href="#" onclick="return aufzu(this)" title="für Details anklicken...">04.04.2008 - Termin X</a>
<ul class="zu">
<li>Beginn 15 Uhr</li>
<li>Ort: Berlin</li>
</ul>
</li>Ich habe den HTML-Code noch weiter vereinfacht. Die Klasse "auf" oder "zu" muss ja überhaupt nicht sein! Es reicht doch, wenn man diese Klasse erst vergibt, wenn man auf den passenden Link klickt! Daher habe ich sie auch in "details" umbenannt. Nur wenn eine <ul> die Klasse "details" hat, wird sie angezeigt.
Ebenso kann man den Titel per Javascript vergeben... was dann zu der generellen Überlegung führen muss, dass man alles, was mit Javascript zu tun hat, eben mit Javascript erst "einbaut". Die ganzen onclick-Events müssen ja nicht im HTML-Code stehen! Also setzt man sie mit Javascript. Das ist dann "unobtrusive JavaScript".
Damit sieht eine funktionierende Seite so aus:
[code lang=html]<html>
<head>
<title>Test</title>
<script type="text/javascript">
// <![CDATA[~~~javascript TermineSchalter = { aktualisieren : function () { var jetzt = new Date(); var jahr = jetzt.getFullYear(); var monat = jetzt.getMonth()+1; var tag = jetzt.getDate(); var termine = this.getElementsByClassName("termin"); var heute = tag + 100*monat + 10000*jahr; var a, i, j, aktuell; for (i = 0; i < termine.length; i++) { a = termine[i].getElementsByTagName("a"); if (a.length > 0) { a[0].title = "Für Details hier klicken!"; a[0].onclick = function () { return TermineSchalter.aufzu(this) }; aktuell = a[0].innerHTML.replace(/^.*(\d+\.\d+\.\d+).*$/g, "$1").split(/\./); for (j = 0; j < 3; j++) { aktuell[i] = parseFloat(aktuell[i]); } aktuell = aktuell[0] + 100*aktuell[1] + 10000*aktuell[2]; if (aktuell < heute) { termine[i].className = "termin-vorbei"; } } } }, aufzu : function (elm) { if (elm) { var li = elm.parentNode; var ul = li.getElementsByTagName("ul"); if (ul.length > 0) { ul[0].className = ul[0].className == "details" ? "" : "details"; } } return false; }, getElementsByClassName : function (className, element) { element = element ? element : document; var muster = new RegExp("(^|\\s)" + className + "(\\s|$)"); var alles = element.getElementsByTagName("*"); var gefunden = new Array(); var i; for (i = 0; i < alles.length; i++) { if (alles[i] && alles[i].className && alles[i].className != "") { if (alles[i].className.match(muster)) gefunden[gefunden.length] = alles[i]; } } return gefunden; }, init : function () { TermineSchalter.oldWinOnLoad = window.onload; window.onload = function () { if (typeof(TermineSchalter.oldWinOnLoad) == "function") { TermineSchalter.oldWinOnLoad(); } TermineSchalter.aktualisieren(); }; } }; TermineSchalter.init();// ]]> </script> <style type="text/css">.termin { border: 1px solid red; margin: 10px;} .termin ul { display: none; } .termin-vorbei { display: none; } .termin .details { display: block; }</style> </head> <body> <h1>Anstehende Termine</h1> <ul> <li class="termin"> <a href="#">04.02.2008 - Termin A</a> <ul> <li>Beginn 19 Uhr</li> <li>Ort: Frankfurt</li> </ul> </li> <li class="termin"> <a href="#">04.04.2008 - Termin X</a> <ul> <li>Beginn 15 Uhr</li> <li>Ort: Berlin</li> </ul> </li> <li class="termin"> <a href="#">05.04.2008 - Termin Y</a> <ul> <li>Beginn 9.30 Uhr</li> <li>Ort: Hamburg</li> </ul> </li> </ul> </body> </html>Es bleibt noch anzumerken, dass der JavaScript-Code in eine externe Datei gehört, ebenso das CSS. Ansonsten viel Spaß!
Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
War wohl gestern abend zu müde...
Die letzte Version war nix für Leute ohne Javascript, denn die haben keine Details sehen können, da diese ja standardmäßig unterdrückt wurden! Daher habe ich das jetzt dahingehend korrigiert. Dabei habe ich auch die Links entfernt, denn diese haben ja kein sinnvolles Verweisziel und brauchen von daher überhaupt keine Links zu sein!
<html> <head> <title>Test</title> <script type="text/javascript"> // <![CDATA[TermineSchalter = { aktualisieren : function () { var jetzt = new Date(); var jahr = jetzt.getFullYear(); var monat = jetzt.getMonth()+1; var tag = jetzt.getDate(); var termine = this.getElementsByClassName("termin"); var heute = tag + 100*monat + 10000*jahr; var spans, i, j, aktuell, uls; for (i = 0; i < termine.length; i++) { spans = this.getElementsByClassName("datum", termine[i]); if (spans.length > 0) { spans[0].title = "Für Details hier klicken!"; spans[0].style.cursor = "pointer"; spans[0].onclick = function () { return TermineSchalter.aufzu(this) }; aktuell = spans[0].innerHTML.replace(/^.*(\d+\.\d+\.\d+).*$/g, "$1").split(/\./); aktuell = parseFloat(aktuell[0]) + 100*parseFloat(aktuell[1]) + 10000*parseFloat(aktuell[2]); // Datumsvergleich: JJJJMMTT, z.B. 20080401 für 1.4.2008 if (aktuell < heute) { termine[i].className = "termin-vorbei"; } else { // Details verstecken uls = termine[i].getElementsByTagName("ul"); if (uls.length > 0) { uls[0].style.display = "none"; } } } } }, aufzu : function (elm) { // elm ist ein <span> in einem <li>, gesucht wird <ul> in diesem <li> if (elm) { var li = elm.parentNode; var ul = li.getElementsByTagName("ul"); if (ul.length > 0) { ul[0].style.display = ul[0].style.display == "none" ? "" : "none"; } } return false; }, getElementsByClassName : function (className, element) { element = element ? element : document; var muster = new RegExp("(^|\\s)" + className + "(\\s|$)"); var alles = element.getElementsByTagName("*"); var gefunden = new Array(); var i; for (i = 0; i < alles.length; i++) { if (alles[i] && alles[i].className && alles[i].className != "") { if (alles[i].className.match(muster)) gefunden[gefunden.length] = alles[i]; } } return gefunden; }, init : function () { // das hier ersetzt <body onload="irgendwas"> TermineSchalter.oldWinOnLoad = window.onload; window.onload = function () { if (typeof(TermineSchalter.oldWinOnLoad) == "function") { TermineSchalter.oldWinOnLoad(); } TermineSchalter.aktualisieren(); }; } }; TermineSchalter.init();// ]]> </script> <style type="text/css">.termin { border: 1px solid red; margin: 10px;} .termin .datum { font-weight: bold; text-decoration: underline; } .termin-vorbei { display: none; }</style> </head> <body> <h1>Anstehende Termine</h1> <ul> <li class="termin"> <span class="datum">04.02.2008 - Termin A</span> <ul> <li>Beginn 19 Uhr</li> <li>Ort: Frankfurt</li> </ul> </li> <li class="termin"> <span class="datum">04.04.2008 - Termin X</span> <ul> <li>Beginn 15 Uhr</li> <li>Ort: Berlin</li> </ul> </li> <li class="termin"> <span class="datum">05.04.2008 - Termin Y</span> <ul> <li>Beginn 9.30 Uhr</li> <li>Ort: Hamburg</li> </ul> </li> </ul> </body> </html>Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Wow! Du bist die Rettung! Vielen Dank für deine Hilfe und vor allem für die Mühe!
Viele Grüße aus der Lausitz
kai_world-
Hallo nochmal!
Kannst du mir eventuell nochmal ganz kurz helfen? Das klappt alles super bisher, aber was muss ich bei deinen Script verändern, dass nur 2 anstehende Termine angezeigt werden?
mfg kai
-
Lieber kai_world,
was muss ich bei deinen Script verändern, dass nur 2 anstehende Termine angezeigt werden?
Du müsstest lediglich in der Funktion "aktualisieren" am Ende einen Mechanismus hinzufügen, der die bestehenden Termine auf zwei reduziert.
Dazu könntest Du eine zusätzliche Variable am Anfang definieren, die den Wert 2 enthält. Nennen wir sie "nurZwei". Also steht am Anfang der Funktion "aktualisieren":
var nurZwei = 2;In der Zeile mit dem Code "if (aktuell < heute) {" beginnt eine Verzweigung, die vergangene Termine aussortiert. Im else-Zweig dagegen werden anstehende Termine behandelt. Dort könntest Du den Anweisungsblock erweitern (also das zwischen "else {" und "}"), um nur zwei Termine anzuzeigen.
Momentan steht da:
} else { // Details verstecken uls = termine[i].getElementsByTagName("ul"); if (uls.length > 0) { uls[0].style.display = "none"; } }Das könnte man jetzt "verfeinern", sprich: erweitern.
} else { if (nurZwei) { // Details verstecken uls = termine[i].getElementsByTagName("ul"); if (uls.length > 0) { uls[0].style.display = "none"; } nurZwei--; // einen Termin weniger... } else { // es wurden zwei Termine angezeigt, alle weiteren jetzt verbergen: termine[i].style.display = "none"; /* Man hätte hier jetzt auch die Klasse "termin-vorbei" benutzen können, aber das widerspricht der Bedeutung dieser Klasse... */ } }Der Code ist recht simpel. Er unterscheidet nicht, welcher der bestehenden Termine vor welchem anderen Termin stattfinden wird. Es werden einfach die Termine der Reihenfolge nach, in der sie im Dokument stehen, abgehandelt - völlig unabhängig von ihrem Datumswert.
Aber das zu prüfen, also dass wirklich nur die zwei nächstgelegenen unmittelbar anstehenden Termine angezeigt werden - unabhängig von der Reihenfolge, in welcher sie im Dokument stehen - müsstest Du nun selbst umsetzen. Wenn Du meinen Script-Code kapiert hast, dann sollte das für Dich kein Problem mehr sein.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
-
-
-
-
-
-
-
-
-
-