Post-It-Notiz Termin 04

Post-It Grafik für Termin

Einbinden von Grafiken in HTML-Seiten

Keywords: Bildtausch, datumsabhängig, Grafiken, Images, JavaScript, Beispiel, Download, kostenlos

Begriffe: Grafik für den (nächsten) anstehenden Termin anzeigen, Veranstaltung, Grafiken datumsabhängig, tauschen, Grafik einblenden, Bildtausch, StandardBild, Terminliste, Bilder terminabhängig anzeigen, Vorschaugrafiken
 HomeBilder • Post-It 04 Demo 01   Download  QuellCode  Demo 02  Demo 03 

Post-It-Notiz Termin 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.
grafiken hintergrund text datumsabhängig termin anstehend

Text für den (nächsten) anstehenden Termin anzeigen

Eine Termininfo wird bis zum Vortag des eingetragenen Ablaufdatums angezeigt. Nach diesem Datum wird der Text für den nächsten anstehenden Termin aus der Liste dargestellt.


Sie zeigen auf Ihrer Seite Hinweise für bevorstehende Events oder Termine. Sie legen eine Sammlung dieser Textinformationen an. JavaScript organisiert die automatische zeitnahe Anzeige. Ihre Seite ist immer auf dem aktuellen Stand!

Zur Ankündigung wird bis einen Tag vor dem anstehenden Termin der zugehörige Text angezeigt. Danach wird, bis einen Tag vor dem nächsten eingetragenen Datum, der nächste Text angezeigt. Und so weiter ...

verwendete Grafik: post-it-300.png
Aktuelle Hinweise

Bitte unbedingt die anstehenden Termine vormerken.

Nächster Termin wird angezeigt.

Sie könnten die Ankündigung auch noch bis zum Datum des Termis (einschließlich) anzeigen lassen. Dazu ist lediglich eine Änderung bei der Prüfung notwendig, zur Zeit: if(days > 0) .

Die Textanzeige für den nächsten Termin mag in einer Darstellung ohne Hintergrundgrafik noch sehr schlicht aussehen. Ich habe den Text vor einem Post-It-Hintergrund positioniert und anzeigen lassen. Wie ich die Hintergrundgrafik eingebunden habe, lesen Sie unten im Abschnitt CSS-Anweisungen.


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
Für das Anwendungsbeispiel oben habe ich die Abmessungen 150 x 150 Pixel festgelegt und eignet sich hervorragend für eine schmale Infospalte. Für den Anzeigebereich habe ich mit CSS-Anweisungen die Größe, eine Hintergrundfarbe, einen Rand und Textformatierungen festgelegt.

Einsatzbereich:

Sie möchten Informationen zum nächsten Event-Termin als Text anzeigen. Jedem Termin ist ein bestimmter Text zugeordnet. Die Informationen zu den Terminen werden in Arrays abgelegt. Das bedeutet: Sie tragen Datum und die zugehörigen Texte in die Register für die Termine ein. Das Script entnimmt die entsprechenden Infos dort für die Anzeige der Terminankündigung.

Sie könnten das Anwendungsbeispiel auch für den Spruch der Woche, das Horskop, Ankündigung der Sommerzeit, Anzeige einer Bauernregel, ... einsetzen.




Arbeitsweise:

Abhängig vom aktuellen Datum wird der nächste eingetragene Termin gesucht. Mit den gefundenen Infos aus Ihrer Liste wird nach einer Verzögerung die beim Laden der Seite zunächst angezeigte Starttext ausgetauscht. Der Starttext wird durch einen anderen Text ersetzt.

Auch hier erreicht man durch den kleinen 'Blitzer' beim Tausch des Textes, (der aus den Augenwinkeln wahrgenommen wird) den Effekt, dass die Aufmerksamkeit auf Ihren Hinweis gelenkt wird! Schießlich könnte man den Text ja auch gleich beim Laden einblenden. Aber das ist hier nicht gewollt.

Eine Termininfo wird bis zum Vortag des eingetragenen Ablaufdatums angezeigt. Nach diesem Datum wird der Text für den nächsten anstehenden Termin aus der Liste dargestellt. Das Datum für den nächsten anstehenden Termin liegt also in der Zukunft. Das bedeutet: Wird Ihre HTML-Datei am 27. April aufgerufen, sucht das Script einen Termin ab dem 28. April.

Wie oben bereits erwähnt könnten Sie eine Ankündigung auch noch bis zum Termindatum (einschließlich) anzeigen lassen. Dazu ist lediglich eine Änderung bei der Prüfung notwendig, zur Zeit: if(days > 0) .


Sammlung der Termininformationen in Arrays

Liste: Datum und Text sind in Arrays abgelegt. Beispiel von Termineinträgen
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";
Was macht das Script?

Findet die Funktion einen Eintrag der in der Zukunft liegt, werden diese Informationen den Starttext ersetzen. Dazu werden die Datumsinformationen aus dem ersten Array (Datum) in ein deutsches Datumsformat umgewandelt und zusammen mit dem Text aus dem zweiten Array (Info) angezeigt.

aus 'January 31, 2011' und "Kirche St. Marien Geilenkirchen, Vorplatz";
wird der Text "31.01.2011 Kirche St. Marien Geilenkirchen, Vorplatz"

Sie erweitern Ihre Liste nach dem gleichen Schema

Datum[Datum.length] = 'April 6, 2011';
Info[Info.length] = "Kindergarten Klabautermann Geilenkirchen";
(Liste der englischen Monatsnamen im Quelltext)





   Aufwand



Notierung im Body Ihres HTML-Dokuments

Im Body wird (an der Stelle wo die Anzeige erfolgen soll) ein <DIV>-Berich eingetragen. Dem Bereich wird eine ID zugeordnet. Über die ID (PostIt300) kann das Script diesen Bereich direkt ansprechen und Textinhate austauschen.

In dem "PostIt-Bereich" notieren Sie den Text, der beim laden der Seite angezeigt werden soll.

(Größenangaben und weitere Formatierungen durch CSS im Head-Bereich)

<div id="PostIt300">
<div id="PostItInnen">Starttext</div>
</div>


   Box in der Box

Wenn alles so einfach wäre ...

Den Bereich für die Textdarstellung (ID=PostItInnen) habe ich noch einml in einen zweiten Bereich (ID=PostIt300) eingefasst. Der dient zur Formatierung des gesamten Darstellungbereichs (mit Hintergrundgrafik). Nur in der Kombination von zwei DIV-Bereichen gelingt eine einheitliche Darstellung in den Browsern.

Div #PostIt300 (blau)
originale Breite 300px;
originale Höhe 300px;

Div #PostItInnen (rot)
Abstand oben 50px;
Abstand links 30px;
originale Breite 230px;
originale Höhe 210px;





Wenn Ihnen das als Einstieg ausreicht Laden Sie die ZIP-Datei herunter. Kopieren Sie die benötigten Grafiken in Ihr Homepage-Verzeichnis. Öffnen Sie die HTML-Datei in einem Editor, kopieren den Code in Ihre Seite und experimentieren weiter.






a  CSS-Anweisungen

Formatierungen sind mit CSS-Anweisungen festgelegt. In meinem Anwendungsbeispiel Post-It 04 hat der Gesamtbereich (PostIt300) die Abmessungen 300 x 300 Pixel. Hintergrund- und Randformatierung sind dort festgelegt. Mit den Formatierungen für den inneren Bereich (PostItInnen) lege ich die Position mit Versatz und die Textformatierung fest.
<style type="text/css">
<!--

#PostIt300 {
position: relative;
top: 0px;
left: 0px;
width: 300px;
height: 300px;
padding: 0px;
background: url(post-it-300.png);
}

#PostItInnen {
position: absolute;
top: 50px;
left: 30px;
width: 230px;
height: 210px;
padding: 0px;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
color: #005680;
line-height: 130%;
text-align: left;
}


-->
</style>


b  Grafik als Hintergrund

Wie ich oben bereits erwähnte, könnte man den Text vor einem Post-It-Hintergrund anzeigen lassen. Geeignete Grafiken habe ich für Sie erstellt.

Statt einer simplen Hintergrundfarbe kann man auch eine Hintergrundgrafik festlegen. Dazu müssen lediglich 2 Codezeilen geändert werden.

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

(Zur Verdeutlichung der Größe lassse ich hier einen Rand anzeigen)

Diese Post-It-Grafiken habe ich selbst erstellt und dürfen für den Einsatz meines Anwendungsbeispiels herunter geladen werden (in der ZIP bereits enthalten).

Post-It-Grafiken 150 x 150 Pixel

    



(Zur Verdeutlichung der Größe lassse ich einen Rand anzeigen)







c  das Script

<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 = '<b>' + AnzeigeDatum + '<\/b><br><br>' + Info[Datensatz];
  document.getElementById("PostItInnen").innerHTML = DatumUndText;
}

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


//-->
</script>






Das könnte Sie auch interessieren: