Post-It Grafik für Termin

 Post-It 04  (Text anzeigen)

Ein Text zu einem anstehenden Termin wird von diesem Anwendungsbeispiel automatisch angezeigt. Nach dem Laden der Seite wird der Starttext durch die Information zum nächsten anstehenden Termin ersetzt.

Das mag in dieser Darstellungsweise ohne Hintergrundgrafik noch sehr schlicht aussehen. Natürlich könnte man den Text auch vor einem Post-It-Hintergrund anzeigen lassen. Wie Sie eine Grafik einbinden, lesen Sie unten im Abschnitt CSS-Anweisungen unter b) .

Blaskapelle "Glück auf 1923" Starttext. Nächster Termin wird angezeigt.

Zunächst wird ein Starttext angezeigt. Nach dem Laden der Seite wird der Starttext ausgetauscht. Verzögerung hier: 7000 ms

Datum[Datum.length] = 'January 31, 2011';
Info[Info.length] = "Kirche St. Marien Geilenkirchen, Vorplatz";

Datum[Datum.length] = 'February 28, 2011';
Info[Info.length] = "Haus Basten Geilenkirchen";

Datum[Datum.length] = 'March 31, 2011';
Info[Info.length] = "Gemeinschaftsgrundschule Geilenkirchen";

Datum[Datum.length] = 'April 6, 2011';
Info[Info.length] = "Kindergarten Klabautermann Geilenkirchen";

• Script in den HEAD-Bereich kopieren
• CSS-Angaben in den HEAD-Bereich kopieren
• Einträge für die Termine anpassen
• im Body den <DIV>-Berich notieren

<div id="Blatt">
<div id="PostIt">Starttext</div>
</div>

Div #Blatt (blau) Breite 150px; Höhe 150px; Div #PostIt (rot) Abstand oben 15px; Abstand links 15px; Breite 120px; Höhe 120px;

<style type="text/css">
<!--

#Blatt
{
width:150px;
height:150px;
padding:0px;
background-color: #FFE6FF;
border:1px solid #EED5FF;
}


#PostIt
{
position:relative;
top:15px;
left:15px;
width:120px;
height:120px;
padding:0px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:11px;
font-weight:normal;
color: #4F4F4F;
line-height:130%;
background-color:transparent;
}

-->
</style>

#Blatt { width:150px; height:150px; padding:0px; background-color: #FFE6FF; border:1px solid #EED5FF; }
#Blatt { width:150px; height:150px; padding:0px; background: url(post-it-150.gif); border:none; }

<script language="JavaScript" type="text/javascript">
<!--

var Datum = new Array();
var Info = new Array();


// Liste der Termine ::::::::::::::::::
// für jeden Termin 2 Einträge: Datum, Text


/*
Englische Schreibweise des Monatsnamens beachten:
January, February, March, April, May, June, July,
August, September, October, November, December
*/

Datum[Datum.length] = 'January 31, 2011';
Info[Info.length] = "Kirche St. Marien Geilenkirchen, Vorplatz";

Datum[Datum.length] = 'February 28, 2011';
Info[Info.length] = "Haus Basten Geilenkirchen";

Datum[Datum.length] = 'March 31, 2011';
Info[Info.length] = "Gemeinschaftsgrundschule Geilenkirchen";

Datum[Datum.length] = 'Apil 30, 2011';
Info[Info.length] = "Kindergarten Hofstr. Geilenkirchen";

Datum[Datum.length] = 'May 31, 2011';
Info[Info.length] = "Jugendheim Süggerath Geilenkirchen";

Datum[Datum.length] = 'June 30, 2011';
Info[Info.length] = "Jugendheim NewCom Geilenkirchen";

Datum[Datum.length] = 'July 31, 2011';
Info[Info.length] = "Jugendheim Oase Geilenkirchen";

Datum[Datum.length] = 'August 31, 2011';
Info[Info.length] = "Schlossruine Leerodt Geilenkirchen";

Datum[Datum.length] = 'September 30, 2011';
Info[Info.length] = "Wurmauenpark Geilenkirchen, Kunsthandwerkermarkt";

Datum[Datum.length] = 'October 31, 2011';
Info[Info.length] = "Haus Basten, Kulturverein";

Datum[Datum.length] = 'November 30, 2011';
Info[Info.length] = "Realschule Geilenkirchen Aula";

Datum[Datum.length] = 'December 31, 2011';
Info[Info.length] = "Nikolausmarkt Geilenkirchen, Marktplatz";

// nur zur Sicherheit

Datum[Datum.length] = 'December 31, 2050';
Info[Info.length] = "aktulle Infos demnächst hier";


// Ende der Liste :::::::::::::


var AnzeigeDatum;
var Datensatz;
var DatumHeute = new Date();


// nächsten Termin suchen
function TerminSuchen() {

  for(i=0; i < Datum.length; i++) {
    var DatumTermin = new Date(Datum[i]);
    var diff =  DatumTermin.getTime() - DatumHeute.getTime();
    days = Math.floor(diff / (1000 * 60 * 60 * 24));
    Datensatz = i;

    if(days > 0) {
    break;
    }
   }

// Datum übernehmen und umwandeln TT.MM.JJJJ
Tag = ((DatumTermin.getDate()<10) ? "0" : "")+ DatumTermin.getDate();
Monat = ( ( (DatumTermin.getMonth()+1) <10) ? "0" : "") + (DatumTermin.getMonth()+1);
Jahr = DatumTermin.getFullYear();
AnzeigeDatum = Tag + "." + Monat + "." + Jahr
}


// Standardtext ersetzen
function TerminInfo() {

  TerminSuchen()
  DatumUndText = AnzeigeDatum + "<br><br>" + Info[Datensatz]
  document.getElementById("PostIt").innerHTML = DatumUndText
}

// Der Aufruf erfolgt nach 7000 Millisekunden
setTimeout('TerminInfo()',7000);


//-->
</script>