Automatisieren - Website X5 Hilfe - Die Helpsite

Direkt zum Seiteninhalt

Hauptmenü:

Automatisieren

Scripte > Text- & Tabellenobjekte

Tabellen und Texte automatisieren

Du hast Termine zu verwalten, die immer auf dem aktuellen Stand sein sollen?
Du möchtest nicht mehr aktuelle Termine manuell löschen müssen?
Du möchtest Textpassagen automatisch nach Termin ausblenden lassen?
Dazu bietet Javascript eine Lösung zum automatisieren:

Bei den Terminen findet das title-Attribut Anwendung und das auszublendende <tr> in Form eines leicht auszuwertenden Datums "jjjjmmtt". Bei korrekter Systemzeit wird im onload aufgerufenen Javascript notierte Datumsvergleich true ausgewertet und die betreffende Tabellenzeile wird über die CSS-Definition display:none ausgeblendet, vorausgesetzt der Besucher hat Javascript aktiviert.
Falls die Anzahl der anzuzeigenden aktuellen Termine beschränkt werden sollen, muss die Obergrenze bei var angepüasst werden.
Hier gehen wir davon aus, daß die Termine in tabellarischer Form dargestellt werden. Da das Script nur Tabellenzeilen mit einem title-Attribut berücksichtigt, kann es problemlos auch bei Verwendung weiterer Tabellen eingesetzt werden.
Das Element title im Javascript- und HTML-Code kann auch durch ein anderes Element, z. B. id ersetzt werden und bei Bedarf lassen sich auch andere Elemente als tr auf diese Weise manipulieren.

Ausgabe:

Datum Termin
17.07.2013 Mein Geburtstag im Jahr 2013
17.07.2014 Mein nächster Geburtstag im Jahr 2014
17.07.2015 Mein nächster Geburtstag im Jahr 2015
17.07.2016 Und mein Geburtstag im Jahr 2016
17.07.2017 Der wird wohl auch kommen...

Natürlich können auch andere Block-Elemente wie ganze Textbereiche ausgeblendet werden, wenn man im Javascript und im HTML-Code "tr" durch das gewählte Element (z.b. "div") austauscht.
Dazu
hier ein Beispiel.

Code für den HEAD-Bereich:

[Vor dem /HEAD]

<script type="text/javascript">
//
<![CDATA[
function TerminCheck() {
 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("tr");
 var Obergrenze = 0; var Rest = Obergrenze;
 for (var i = 0; i < Zeilen.length; i++) {
   if (Zeilen[i].title) {
     if (parseInt(Zeilen[i].title) < aktuell) Zeilen[i].style.display = "none";
     else if(Obergrenze) {
       if(Rest) Rest--; else Zeilen[i].style.display = "none";
     }
   }
 }
}
// ]]>

</script>

Code innerhalb des BODY-Tag:

[Im Tag BODY]

onload="TerminCheck();
ohne Website X5:
<body onload="TerminCheck();">

Code für das HTML-Objekt:

[Objekt HTML]

<table>
 <tr title="20130717">
   
<td>17.07.2013</td> <td style="text-indent:30px;">
   Mein Geburtstag im Jahr 2013
   
</td>
 
</tr>
 
<tr title="20140717">
   
<td>17.07.2014</td> <td style="text-indent:30px;">
   Mein nächster Geburtstag im Jahr 2014
   
</td>
 
</tr>
 <tr title="20150717">
   
<td>17.07.2015</td> <td style="text-indent:30px;">
   Mein nächster Geburtstag im Jahr 2015
   
</td>
 
</tr>
 
<tr title="20160717">
   
<td>17.07.2016</td> <td style="text-indent:30px;">
   Und mein Geburtstag im Jahr 2016
   
</td>
 
</tr>
 
<tr title="20170717">
   
<td>17.07.2017</td> <td style="text-indent:30px;">
   Der wird wohl auch kommen...
   
</td>
 
</tr>
</table>

Beispiel für Textpassagen:
Hier wurde das <tr title= gegen <div id= ausgetauscht.

Ausgabe:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Code für den HEAD-Bereich:

[Vor dem /HEAD]

<script type="text/javascript">
//
<![CDATA[
function TextCheck() {
 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 = 0; 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>

Code innerhalb des BODY-Tag:

[Im Tag BODY]

onload="TextCheck();
ohne Website X5:
<body onload="TextCheck();">

Code für das HTML-Objekt:

[Objekt HTML]

<div id="20250221">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

Feedbacks zu ""

es gibt insgesamt 0 Kommentar(e)



Name*
Vorname
Kommentar*
Email *
Homepage
Telefon
Sicherheitscode *
 
Logo HTML5
Button Spenden

© 2009 - 2018




  Besucher Statistik
 » 9 Online
 » 90 Heute
 » 2061 Woche
 » 4778 Monat
 » 59321 Jahr
 » 305899 Gesamt
Rekord: 1420 (10.04.2014)
Zurück zum Seiteninhalt | Zurück zum Hauptmenü