Wir gehen davon aus, dass der zu zentrierende Div bereits vorbereitet und voll mit Daten ist. Nun gehen wir hin und zentrieren ihn.

Schritte

1. Die Div Ebene muss erstmal vom linken Rand genau in der Mitte des Bildschirms stehen. Das macht man so (unser Div heißt einfach div):

document.getElementById(div).style.left='50%';

50% bedeutet – setzte die Ebene genau in die Mitte des Bildschirms vom linken Rand her. An der Stelle ist es und noch egal wie breit der Div tatsächlich ist.

2. Ensprechend der Größe der Div Ebene, den Abstand zum linken Rand des Bildschirms verringern und zwar genau die Hälfte von der tatsächlichen Größe des Divs:

function CenterScreenDiv(div) {
    div.style.marginLeft = "-" + parseInt(div.offsetWidth / 2) + "px";
    div.style.marginTop = parseInt(div.offsetHeight / 2) + window.document.documentElement.scrollTop + "px";
}

Und fertig – die Ebene steht mittig wie ein Wunder, cross-browser-fähig!

Zusammenfassung der Funktion

Anbei die Funktion komplett:

document.getElementById('MyDiv').innerHTML = 'Hallo Welt';
CenterScreenDiv(document.getElementById('MyDiv'));

function CenterScreenDiv(div) {
    div.style.left='50%';
    div.style.marginLeft = "-" + parseInt(div.offsetWidth / 2) + "px";
    div.style.marginTop = parseInt(div.offsetHeight / 2) + window.document.documentElement.scrollTop + "px";
}

Die Funktion können Sie bequem nutzen immer, wenn Sie dynamische Inhalte nutzen, auch via AJAX. Es wird auch berücksichtigt, dass das Fenster auch mittig und sichtbar stehen soll, auch wenn der Benutzer nach unten gescrollt hat.

Funktion

Syntax: ZEICHENKETTE.substr(nStart, nLaenge)

Beispielsfunktion:

var sString = "Hallo Welt!";
alert(sString.substr(6));

Resultat: “Welt!” – es wurde bei der Javascript Funktion vom ersten zum letzten Zeichen geschnitten.

Parameter

nStart - der Parameter ist erforderlich und gibt an ab welchem Zeichen die neue Zeichenkeitte starten soll.
nLaenge – der Parameter ist nicth erforderlich und gibt an wie lang in Zeichen die neue Zeichenkette sein wird. Sollten sie den Parameter nicht angeben – wie auf dem ersten Beispiel oben – so wird die Zeichenkette ab nStart zum Ende abgeschnitten.

Vertiefung der Funktion und Anwendungsbeispiele

Um die Funktionsweise zu vertiefen, werden wir eine Funktion zur Ermittlung der Anzahl der Zeilen einer Textarea betrachten, die wir nutzen, um programmiertechnisch den Wert des Attributes “rows” zu beeinflussen, so dass der in der Textarea eingegebene Text immer sichtbar ist ohne Scrollbalken, Facebook Style. Die Funktion werden wir in den nächsten Artikel näher betrachten.

function BerechneTextAreaHoehe(tarea) {    
    var nCounter = 1;
    var sNeedle = "\n";
    for (var i=0;i< tarea.value.length;i++) {
        if (sNeedle == tarea.value.substr(i,sNeedle.length)) {
            nCounter++;
        }
    }    
    tarea.rows=nCounter;
}

Was passiert in der oberen Funktion?

 - es wird der zur Zeit eingegebene Wert einer als Parameter übergebenen Textarea Zeichen für Zeichen abgeschnitten
 - Sofern ein Abschnitt gleich der Zeichenkette “\n” (weicher Return) ist, so wird der Counter um eins erhöht.
 - Am Ende wird entweder 1 oder die größer 1 Zahl zurückgegeben.

Wenn diese Funktion bei jedem Tastendruck angewendet wird, so kann das Attribut rows manipuliert werden. Dazu aber in unseren nächten Artikeln.

Bei jäglichen Fragen stehen wir gerne zur Verfügung.

Anbei ein Link zu den Charts:

http://teethgrinder.co.uk/open-flash-chart-2/bar-cylinder-chart.php

Weitere Beispiele gibt es auf der Seite, lesen Sie sich ein.

Funktion

Die Programmierung bei Open Flash Chart ist nicht schwer – das Tool generiert Flash Animationen, in dem es Code im JSON Format ausließt. Da aber nicht jeder das flüßíg schreiben kann, liegen diverse Schnittstellen vor, unter anderem eine PHP Schnittstelle, die Ihre Daten übernimmt, das Styling einstellt und daraus den JSON Inhalt für die Funktion generiert. Dazu müssen Sie die entsprechenden Javascript Dateien inkluden, ein Platzhalter DIV positionieren und ab geht’s..!

Doku

Der Programmierer vom Tool hat auch eine umfassende Dokumentation erstellt und jeder, der ein bisschen PHP kann, könnte den vollen Umfang der Funktionen anwenden. Wir binden gerne die Charts auf Ihrer Seite ein, dazu reicht eine kurze Anfrage Ihrerseits.

Die JS Funktion

function CheckTextAreaHeight(tarea) {
   var nCounter = 1;
   var sNeedle = "\n";
   
   for (var i=0;i< tarea.value.length;i++) {
      if (sNeedle == tarea.value.substr(i,sNeedle.length)) {       
         nCounter++;
      }
   }

   tarea.rows=nCounter;

}

Funktionsaufschlüsselung

Nachfolgend die Erläuterung darüber wie diese Funktion, die automatisch die Höhe Ihrer Textarea anpasst und der Text in der Textarea / die Textarea selber als Parameter erhält:

1. Es wird von einer Zeile vorausgegangen
2. Es wird nach Umbrüche in der Text gesucht – “\n”
3. Sofern der Umbruch beim Durchsuchen des Textes in einer JS Schleife gefunden wird, wird unser Zähler um 1 erhöht.
4. Am Ende wird der Parameter “rows” (Anzahl der Zeilen) auf den Zählerwert gesetzt.

Diese Javascript Funktion erfordert keine PHP Programmierung und ist eine Client-Side Funktion, die Sie “zu Hause” in einer Text-HTML Datei austesten können.

Einsatz der Funktion

Um die Javascript Funktion zur automatisierten Anpassung einer Textarea in der Anzahl der Zeilen einzusetzen, benötigen Sie vor allem eine Textarea:

   <textarea onkeyup="CheckTextAreaHeight(this);" rows="1">Geben Sie hier Ihren weiteren Text</textarea>

Es wird nach dem Loslassen einer Taste jedes Mal die Höhe angepasst und somit können Sie schreiben, ohne nachzudenken, ob Sie das sehen, was Sie schreiben und ohne scrollen zu müssen.

Lesen Sie hier nach weiteren Javascript Funktionen, die wir hier vorgestellt haben.

Spaltenname: SelectedIDs
Werte: 1,5,23,333,2315

Das erste, was man machen würde um die Werte abzufragen, wäre eine Abfrage mit WHERE … IN (wert1, wert4):

SELECT Name FROM Tabelle WHERE MeineID IN (SelectedIDs)

Das funktioniert leider nicht, da die Kommagetrennte Werte in dieser Form nicht an IN(…) übergeben werden können, im Gegensatz zu einem Array aus ein SELECT oder eine wirklich reingeschriebene Zeichenkette – 1,24,54 usw. Die PHP Funktion EXPLODE(TRENNZEICHEN, ZEICHENKETTE) generiert ein Array, der so ähnlich von MySQL generiert werden könnte, um an die WHERE … IN (AUS_EXPLODE_ARRAY) übergeben werden kann. MySQL unterstützt leider kein EXPLODE, reguläre Ausdrücke aber schon. Das wird nämlich unsere Programmierlösung für die Kommagetrennten Werte, die wir abfragen möchten.

Lösung

Es ist auch nicht immer möglich die Tabelle zu normalisieren, deswegen gibts es eine Erleichterung der Programmierung an der Stelle. Betrachten wir folgende zwei Tabellen:

Tabelle1
—————-
Name - Michael
MeineID – 2

Tabelle2
—————–
KlausurName – Englisch
SchulerIDs - 1,2,5,6

Wir haben hier den Michael, der die Klausur Englisch, zusammen mit vier anderen Schülern geschrieben hat. Wie bekommen wir ein JOIN auf die Zwei Tabellen? Folgende Abfrage kümmert sich mit einem regulären Ausdruck darum:

SELECT Name, MeineID, (SELECT KlausurName FROM Tabelle2 WHERE Tabelle1.MeineID REGEXP REPLACE(SchulerIDs, ‘,’, ‘|’)) as GeschriebeKlausur FROM Tabelle1

An der Stelle kommt der reguläre Ausdruck ins Spiel – WHERE MeinWert REGEXP (Wert1|Wert3|Wert4) gibt Wahr zurück, wenn einer der mit der Pipeline getrennten Werte mit MeinWert übereinstimmt. Mit der Funktion REPLACE wird die kommagetrennte Zeichenkette für den regulären Ausdruck aufbereitet – die Kommas werden durch ein Pipeline ersetzt. Das bedeutet, dass Ihre Werte beliebig getrennt werden können, Sie müssten einfach den zweiten Parameter der REPLACE Funktion berücksichtigen.

Somit macht MySQL einfach Spass!

Die Standardaufstellung ist, dass man die AWStatss Stastiken für die Seite use-blog.de auf dieser Art und Weise aufruft:

http://use-blog.de/stats/awstats.pl?config=blog

Der Parameter “blog” bestimmt welche Konfigrationsdatei von allen solchen Dateien von AWStats zu laden ist. Diese Konfigurationsdatei enthält verweise darauf welche Logdateien zu analysieren sind. Somit können die einzelenen Statistiken für die verschiedene Webs generiert werden. Jedes Web muss natürlich eigene Access und Error Logs haben. Nehmen wir an, dass die Konfigurationsdatei für use-blog.de awstats.blog.conf heißt. Hier sind die Werte, die man in der Datei abändern muss, um die Statistiken mit Passwort zu versehen:

AllowAccessFromWebToAuthenticatedUsersOnly=1

Diese Option besagt, dass man nur Besuchern Zugriff gewährt, die sich per Benutzer und Passwort angemeldet haben. Welcher Benutzer sich anmelden darf, wir mit folgender Option festgestellt:

AllowAccessFromWebToFollowingAuthenticatedUsers=”blog_user”

Der Benutzer “blog_user” muss sich nach Passwort eingabe einloggen, damit er die Statistiken sehen darf. Damit überhaupt eine Passwortaufforderung kommt, muss der Virtual Host oder die .htaccess Datei von diesem Web um folgende Einstellung ergänzt werden und anschließend der Apache Server neu gestartet werden:

<VirtualHost …>

ServerName use-blog.de

<Location /stats>
   AuthType Basic
   AuthName “Statistik-Bereich”
   AuthUserFile /www/htdocs/blog/stats_account
   Require valid-user
 </Location>

</VirtualHost>

Die Direktive “Location” besagt, dass auf dem Ordner /stats nur nach erfolgreicher Anmeldung per Benutzer und Passwort zuzugreifen ist. Die Datei, die die Hashwerte vom Passwort enthalten, heißt in dem Beispiel stats_account. Dort muss mittels des Befehls “htpasswd” der Zugang abgelegt werden. Hier ein Beispiel wie man das macht:

htpasswd -b /www/htdocs/blog/stats_account blog mein_passwort

Hier werden Benutzer “blog” und Passwort “mein_passwort” in die Datei stats_account in Hashform reingeschrieben.

Das wars! Vergessen Sie nicht, die Logdateien in dem VirtualHost und in der AWStats Konfigurationsdatei von der entsprechenden Domain abzugleichen, damit Sie auch die richtigen Statistiken sehen. Für ein Webserver mit VHosting müssen alle VirtualHosts um die Location Direktive ergänzt werden und alle AWStats Konfigurationsdateien angepasst werden.

Es gibt drei Wege die MySQL Queries so auszuführen, so dass man sich nicht mehr Gedanken machen muss, ob Fehler bei dem Einfügen auftreten:

MySQL: REPLACE INTO

Wenn Sie eine Abfrage dieser Art ausführen,

REPLACE INTO table SET id=3454,a='1', b='2'

wird ein vorhandener Datensatz überschrieben. Das ist nicht besonders gut, wenn wir die Daten einfach behalten wollen und die Abfrage den vorhandenen Datensatz ignorieren lassen wollen. Hiermit verlieren Sie die Daten, die Sie schon mal in der Datenbank hatten.

MySQL: INSERT IGNORE

Einfacher ist es mit INSERT IGNORE:

INSERT IGNORE INTO table SET id=3454,a='1', b='2'

Sollte hier ein Datensatz mit dieser ID existieren, so wird die Ausführung der Abfrage einfach ignoriert und überschritten (d.h. es geht dann zu der nächsten Abfrage). Wenn der Datensatz nicht vorliegt, wird ein neuer Datensatz angelegt. Das funktioniert ganz gut in den meisten Fällen. Jedoch können hier weitere MySQL Fehler auftreten, die sich nicht auf die bereits vorhandene ID beziehen, die die Ausführung der Abfrage trotzdem nicht verhindern werden. Es kann sein, dass man bei solchen Fehlern die Ausführung abbrechen lassen möchte. Deswegen gibt es die elegantere Lösung:

MySQL: INSERT … ON DUPLICATE KEY UPDATE …

INSERT INTO table SET id=3454,a='1', b='2' ON DUPLICATE KEY UPDATE ....

Bei diesem Fall wird die Abfrage nur ignoriert, wenn ein vorhandener Datensatz vorliegt. Alle weiteren Fehler, die auftreten könnten, werden sämtliche Abfragen abbrechen lassen. Der ”….” Abschnitt sollte ein MySQL Befehl enthalten, der keine Auswirkung auf die Daten haben wird, wie etwa UPDATE id=id.

Implementation

Sie sollten vor allem ein Textlink oder ein Button (Input) erzeugen, der entsprechend die Funktion auf Mausklick ausführt.

Textlink:

<a href="#" onclick="javascript:self.print();">Diese Seite ausdrucken</a>

Button (<input> Feld):

<input type="button" value="Diese Seite ausdrucken" onclick="javascript:self.print();" />

Besonderheiten

Die Funktion ist besonders nützlich, wenn Sie kleine Inhalte in einem neuen Fenster aufmachen lassen, wo Sie sicherstellen können, dass der Inhalt richtig ausgedruckt wird. Das Ereignis onclick muss immer mit kleinen Buchstaben ausgeschrieben sein (W3C Richtlinien). Theoretisch können Sie die Javascript Funktion überall einbauen, wo onclick gültig ist.

Was brauchen Sie, um diese Funktion zu implementieren?

Sie sollten vor allem ein Textlink oder eine Grafik, die jeweils Links sind, die beim Anklicken die Javascript Funktion zum Hinzufügen zu den Favoriten ausführt. Anbei die Funktion, die Erklärung folgt:

Textlink:

<a href="javascript:window.external.AddFavorite(self.location,document.title)">Zu Favoriten hinzufügen</a>

Verlinktes Bild:

<a href="javascript:window.external.AddFavorite(self.location,document.title)"><img src="FavoritenGrafik.jpg" alt="Zu Favoriten hinzuf&amp;amp;uuml;gen" title="Zu Favoriten hinzuf&amp;amp;uuml;gen" border="0" /></a>

Was macht die Funktion?

Es wird beim Anklicken des Links die aktuelle Adresse (URL) (self.location) und den Titel der aktuellen Adresse (document.title) an die Funktion AddFavorite übergeben. Somit kommt das Standardfenster von Ihrem Browser und es wird vorgeschlagen die Seite zu den Favoriten hinzuzufügen, mit dem jeweiligen Titel Ihrer Seite. Sie können statt der Funktion document.title Ihren eigenen Text eingeben, so etwa wie ‘Meine Geschäftswebseite’, dann blicken aber die Besucher nicht mehr durch die eigenen Favoriten durch. Wenn Sie eine Grafik verlinken, achten Sie auf den Pfad der Grafik und auf das Attribut border=”0″, weil ansonsten der Browser die Grafik mit einem Standardrahmen umfassen wird – das ist etwas unschön.

Die zu formatierende Zahl – so etwa wie 29.5
Anzahl von Nachkommastellen
Optional: Trennzeichen für die Nachkommastellen
Optional: Trennzeichen für die Tausenderstellen

Da man immer wieder die gleichen Parameter nimmt, wenn man die Zahlen auf die Deutsche Screibweise formatiert, so schreiben wir uns eine kleine und einfache Funktion, die number_format anwendet:

function ZahlFormatieren($dZahl, $nAnzahlNachkommastellen=2) {
     return number_format($dZahl, $nAnzahlNachkommastellen, ",", ".");
}

Die Funktion formatiert die Zahl 28,000.4 als 28.000,40 mit Zwei Kommastellen. Man kann gerne die Anzahl der Kommastellen über den Parameter von dem Standardwert von 2 auf eine andere Anzahl erweitern oder minimieren.

Einsatz

Wenn Sie beispielsweise ein Formular haben, das Zahlen in Textfelder automatisch ausfüllt, die auch korrekt dargestellt werden sollen, so können Sie die Funktion auf folgender Art und Weise in HTML einbetten:

<input type="text" name="MeineZahl" value="<?php echo ZahlFormatieren($dMeineZahl) ?>" />