User-Logon

Download der aktuellen Versionen.

Benutzer:
Kennwort:

Auch bewegliche Infoboxen sind relativ einfach zu implementieren. Sicherlich muss sind einige Schritte nötig und die Administration der Text ist noch nicht optimal, aber dafür umso flexibler.

Downloads

web2date-Tools

Grundpreisberechnung mit Varianten

Tag-Cloud

Jahreszeiten-Animation

Download Counter

Download Hitliste

News integrieren

Kalender mit Feiertagen

Umlaufende Kontextspalten

Kontextspalten auf Unterseiten

Umlaufende Sidebars auf Unterseiten

Bewegliche Infoboxen

Services:

Recherche

Sitemap mit Kurzinfo

Downloads

Aktuelle Infos

Interessante Links

Impressum

Allgemein:

Startseite

Orientierung

Sitemap (Kurztexte)

Sitemap (Struktur)

Gästebuch

Das Letzte auf der Site

BLOG Kurzinfos im Weblog

Anfrage

§6 TDG Kennzeichnung

Foto und Bildlizenzen

Kontakt

Mobil A
Mobil D
Office
Fax
+43 (68) 110 622 322
+49 (175) 29 843 83
+49 (89) 820 738-24
+49 (89) 820 738-29

 
e-Consultance unterstützt Back to Life e.V.


Abgeltungsteuer
Abgeltungsteuer
Vergessen Sie nicht das neue Infosheet zu holen! e-Consultance hat für Sie die Themenstruktur und Handlungsfelder der Abgeltungsteuer überarbeitet. Hier finden Sie viele Seiten mit wertvollen Informationen zu Steuern in Deutschland.


374. Verordnung zur Solvabilität
374. Verordnung zur Solvabilität
Solvabiliätsberechnung nach dem Standardansatz ist einheitlich für alle Banken. Eine Chance für Service-Provider?


Öffentliche Vorträge
Öffentliche Vorträge
Meine öffentlichen Vorträge und Referate, deren Kurzinhalte und einzelne Vorträge sind hier sogar zum Downloaden.

Sie sind hier: »  Startseite  »  Services »  Downloads  » Bewegliche Infoboxen

Bewegliche Infoboxen


Beispiel für eine Infobox

Hier sehen Sie ein Beispiel für eine Infobox .

Die Boxen lassen sich beim Einblenden mit einer vordefierten Breite, wahlweise a) anpassende Boxhöhe oder b) vorgegebener Box-Höhe und einer relativen Position (x,y) zum Referenztext positionieren. Die Boxen gehen auf und wieder zu, wenn man mehrfach auf den Link clickt. Die Boxen lassen sich verschieben, in der Größe ändern und schließen. Alle Änderungen werden gemerkt, um nach einem Ausblenden beim und Einblenden wieder rekonstruiert. Nach einem Neuladen der Seite sind alle vordefinierten Orginal-Werte wieder vorhanden. Jede Box kann Ihre individuellen Voreinstellungen bekommen.

Eine Box wird durch einen manipulierten externen Link gesetzt. Beginnt ein externer Link mit "http://#" dann wird die folgende Nummer "http://#50" als Referenz zu einem vordefinierten Infotext-Nummer 50 interpretiert. Da externe Links überall gesetzt werden können, erlaubt diese Link-Technik, dass überall in web2date Infoboxen positioniert werden können.

Der auf dieser Seite dargestellte Lösung ist noch die Vorgängervariante. Inzwischen werden die Inhalte der Infoboxen durch speziell benannte Absätze definiert. Um eine Infobox zu definieren gibt man in webtodate einen Textabsatz mit dem Titel "#Infobox" ein und im Text folgt die Nummer der Infobox. Alle folgenden Absätze werden nun eingesammelt bis ein Absatz mit "#Infoend" folgt. In diesem Infoend Absatz kann man Breite. Höhe und relative Position der Infobox noch nachdefinieren. Damit kann eine Infobox beliebige Inhalte bekommen und die Übergabe von Inhalten an die Infobox ist damit der volle Design-Umfang von webtodate.

1. Download der Styles und Javascripte

Klick für Großansicht

Bewegliche Infoboxen

Noch mehr Informationen sind nur einen kleinen Click weiter.

Diese Zip-Archiv mit den   Styles [7 KB] für die Infoboxen downloaden. Es enhält auch das (i)-Logo für die Indikation einer Infobox, die Javascript-Routinen für das Handling der Boxen und einen HTML-Absatz, der die Infotexte definiert und eine leere setup.php.

Sie bekommen:
- style_windows.css, die Styles
- windows.js, zwei Java routinen (nicht anfassen!)
- dhtml.js
- infobox.html (vordefinierte Infotexte <Javascript> zum Kopieren in einen HTML-Absatz)
- picinfo (das Logo)
- setup.php (eine leere Datei, nicht wundern)

Einfach Alles ins Designverzeichnis auspacken.

Hinweis: Da alle Routinen PHP voraussetzen, müssen Sie unter Projekteigenschaften / HTML Optionen die Dateiendung von "HTML" auf "php" abändern (einfach eingeben), oder auf allen Seiten die Option "Skriptfunktion" einzeln einschalten.

Die setup.php wird nur benötigt, um sich die Schachtelungstiefe von web2date übergeben zu lassen. Dass die Datei leer ist, ist völlig korrekt.

2. Integration der Routinen

Hängen Sie den folgenden Code einfach in die global.ccml. Damit werden die Dateien angemeldet und beim Veröffentlichen mit auf den Server hochgeladen.

<cc:asset src="style_windows.css" dst="swi.css" obj="mywindowsstyle">
<cc:asset src="windows.js" dst="windows.js" obj="mywindows">
<cc:asset src="dhtml.js" dst="dhtml.js" obj="mydhtml">
<cc:asset src="setup.php" dst="setup.php" obj="setup">
<cc:picture obj="picinfo" dst="picinfo.jpg" src="pic_info.jpg">

3. Einbau der Routinen ins Design

In der navigation.ccml müssen die Routinen zum Start jeder Seite dazugeladen werden. Ergänzen Sie unmittelbar vor der Anweisung </head> (die Sie in Ihrem Design finden müssen) folgende drei Zeilen. Die Zeile </head> unten dient nur zur Darstellung, wie diese Zeilen einzufügen sind. Diese Zeile </head> darf nicht zweimal in der Datei enthalten sein.

Alter Code:
</head>

Neue Code:
<link rel="stylesheet" type="text/css" href="<cc:print value="&mywindowsstyle.url">" />
<script type="text/javascript" src="<cc:print value="&mydhtml.url">" ></script>
<script type="text/javascript" src="<cc:print value="&mywindows.url">" ></script>
</head>

4. Modifikation der Link-Funktion

In der link.ccml und im Verzeichnis common in der sidebar_link.ccml finden ab Zeile 13/14 folgenden Code. Dabei werden wir nur die "<a..."-Link Anweisung inkl. dem Ende-Code "</a>" durch einen neuen Code ersetzen. Am besten Sie markieren den gesamten neuen Code und ersetzen den alten Block. Die kursiven Texte dienen nur zur Orientierung.

Alter Code (Zeile 13/14):
<cc:if cond="&link.isoffsite">
<a class="link" href="<cc:print value="&link.url">" target="_blank"><cc:print value="&link.caption"></a> </cc:if>

Neuer Code:
<cc:if cond="&link.isoffsite">
<?php
$checklink="<cc:print value="&link.url">";
if (substr($checklink,0,8)=="http://#")
{ $checklink =1* substr($checklink,8,2);
echo "<script type=\"text/javascript\">checkinfo(".$checklink.");</script>";
echo "<a id=\"Window".$checklink."Refa\" ";
echo "class=\"boxlink\" ";
echo "title=\"Click zum &Ouml;ffnen der Infobox Nr. ".$checklink." zu &laquo;<cc:print value="&link.caption">&raquo;\"";
echo " href=\"JavaScript: windowAddNr('Window".$checklink."Ref',".$checklink.")\">";
?>
<cc:print value="&link.caption"><cc:printpicture obj="picinfo"></img></a>
<?php
} else
{ echo "<a href=\"<cc:print value="&link.url">\" target=\"_blank\" title=\"Link ins Web\">&raquo;&nbsp;<cc:print value="&link.caption"></a>";}
?>
</cc:if>

5. Definieren der Texte

Jetzt kommt der etwas aufwändigere Teil. Sämtliche Hilfetexte müssen in der jeweiligen Seite vorab definiert sein. Dazu nutzt man folgenden Javascript-Code Schnipsel und speichert die Texte unter Nummern ab.

<script type="text/javascript">
var

nr=50;
initinfo(nr);
infotext[nr]["Title"]="Infobox-Title";
infotext[nr]["Content"]="Eine Infobox geht auf, zeigt Text an und ....";
</script>

Dabei ist die Syntax relativ einfach. Nur die fett markierten Texte dürfen / brauchen von Ihnen geändert werden. Der aktuelle Text wird auf die Infotext-Nummer 50 zugewiesen. Es sind derzeit für 100 Texte Speicherplatz vorgesehen. Zunächst wird die Nummer definiert, dann wird ein "initinfo(nr);" aufgerufen, und damit die Box bzgl. Breite, Höhe, Position usw. vorbelegt. Anschließend können Sie diese Werte überschreiben.

Die Java Syntax erlaubt es relativ einfach Texte über mehrere Zeilen zu verketten, also fortzusetzen:

infotext[nr]["Content"]="Eine Infobox geht auf, zeigt Text an "+
"
und l&auml;&szlig;t sich auch verschieben und ........";

Der Umbruch erfolgt durch ein abschließendes und eröffnendes Anführungszeichen und ein Pluszeichen dazwischen. Der Inhalt ist, wie man sieht, reiner HTML-Text und kann daher alles enthalten, was mit HTML möglich ist.


Noch zwei Worte zur Syntax von Java: "var name" ist eine Variable, die gewisse Inhalte speichern kann. Um die Eingabe zu vereinfachen, habe ich diverse Variablen in windows.js ´schon vorbelegt.

var cr="<br /><br />";

Die Variable cr enthält mit dieser Anweisung, die eine Zeile beendet und dann nochmals eine Zeile beendet. D.h. eine Leerzeile generiert. Mit "+" kann man in Java Texte mit Variablen verbinden:

infotext[nr]["Content"]="Eine Infobox geht auf, zeigt Text an "+
"und l&auml;&szlig;t sich auch"+cr+"verschieben und ........";

Damit hat man eine Leerzeile nach "läßt sich auch" und vor "verschieben". Im Beispiel Java-Programm ist ein richtig komplexer Infotext Nummer 1 gespeichert, den man auf der Startseite meine Site ansehen kann.


Hier folgt nun der Orginal-Java Code, der am Anfang dieser Seite integriert ist, um das Beispiel im ersten Absatz zu ermöglichen. Dabei sieht man, dass beim zweiten Text, die Definition var vor der Nummer nicht mehr nötig ist, da die Variable nr ja schon in der zweiten Zeile definiert wurde. Ebenso lassen sich Breite, Höhe, und relative Position definieren. Das muss man aber nicht. Man kann diese Positionsangaben weglassen und es werden dann die in windows.js definierten Standard-Werte verwendet. Auch der Titel wird immer mit "Infobox" vorbelegt. Nur wenn man einen sprecherenden Titel will, muss ein Titel definiert werden.

<script type="text/javascript">
var

nr=50;
initinfo(nr);
infotext[nr]["Title"]="Infobox'";
infotext[nr]["Content"]="Eine Infobox geht auf, zeigt Text an und l&auml;&szlig;t sich auch verschieben und in der Gr&ouml;&szlig;e anpassen."+
cr+"Diese Box hat feste Ausma&szlig;e beim &Ouml;ffnen und steht eher unten vom Referenztext.";
infotext[nr]["SizeX"]=250;
infotext[nr]["SizeY"]=200;
infotext[nr]["PosX"]=50;
infotext[nr]["PosY"]=80;

nr=51;
initinfo(nr);
infotext[nr]["Title"]="Infobox'";
infotext[nr]["Content"]="Eine Infobox geht auf, zeigt Text an und l&auml;&szlig;t sich auch verschieben und in der Gr&ouml;&szlig;e anpassen."+
cr+"Diese Box umschlie&szlig;t nur den Inhalt und steht mehr rechts.";
infotext[nr]["SizeX"]=200;
infotext[nr]["SizeY"]=1;
infotext[nr]["PosX"]=200;
infotext[nr]["PosY"]=20;
</script>

6. Anwendung

Da Sie bereits Texte in der infotext.html vorbelegt haben, können Sie sofort in Ihrem Projekt loslegen. Einfach irgendwo einen Link setzen und als externe Referenz "http://#50" eingeben. Die infotext.html per Texteditor öffnen und mit Copy und Paste in einen HTML Absatz auf der Seite einfügen. Der Absatz sollte am Seitenanfang sein, oder am Anfang in der Kontextspalte (wenn Sie Links in der Kontextspalte haben). Dann Seite im Preview anzeigen lassen. Und schon sollte es funktionieren. Sie können die Texte auch sukzessive, also Absatz für Absatz definieren. Sie müssen nicht alle Texte einer Seite am Anfang in einen HTML-Absatz zusammenfassen.

7. Veröffentlichung

Es ist ein Check eingebaut. Wird die Seite ausgegeben, ist aber die Box nicht definiert erscheint in großen roten Buchstaben "Infobox Nr. ? ist undefiniert!". Diese Wirkung wird in windows.js ca. Zeile 44 ausgelöst.

function checkinfo(number){
if (infotext[number]==undefined)
{ document.write("<span style=\"color:#FF0000;font-size:30px;font-weight:bold;\">");
document.write(" Infobox "+number+" ist undefiniert! </span>");
}
}

Hier kann man den Effekt auch ändern, indem man z.B. nichts ausgibt. D.h. solange der User nicht den Link abklickt, fällt gar nichts auf. Es gibt keinen Hinweistext. Das ist dann gut für die Veröffentlichung. Der Code sieht dann so aus:

function checkinfo(number){}

Sollten Sie ein Idee haben, wie das Definieren der Infotexte vereinfacht werden könnte, dann sagen Sie mir das. Ich bin da selber noch etwas unglücklich über die vorhandene Lösung und denke über eine Funktion nach, Absätze aus dem Seiteninhalt aufzusammeln, um sie dann als Infobox auszugeben. Aber so hat man die maximale Gestaltungsfreiheit, weil man kompletten HTML Zugriff hat. Aber eben auch den HTML Zugriff anwenden muss.


Bei Verwendung

Bei Verwendung würde ich mich über eine Info freuen, oder einen Eintrag in meinem » Gästebuch. Das Script funktioniert mit PHP4 und 5 (zumindest sollte es das ;-).

zur letzten Seite zurück
Startseite
zur vorherigen Seite
zur vorherigen Seite
zur letzten Seite zurück
Startseite
zum Seitenanfang
zum Textanfang
zum Seitenende
druckbare Seiten
Seite mailen
Add Site to Mr. Wong
Bei LinkARENA bookmarken