Tooltips auf Webseiten
Immer wieder wollte ich Tooltips auf Webseiten verwenden. Eigentlich kann man diese ja sehr einfach über Divboxen realisieren, doch so richtig schön waren die nie. Außerdem möchte man ja nicht für jeden Tooltip ein eigenes Div definieren und das dann ein-/ausblenden.
Auf meiner Suche nach einer besseren Lösung bin ich dann auf qTip gestoßen. Mit diesem jQuery Plugin sind die nicht nur schön, sondern auch total einfach zu verwenden!
Aktuell verwende ich dieses Plugin in 3 unterschiedlichen Projekten, und freue mich noch immer über die einfache Anpassbarkeit an Designs sowie auch auf unterschiedliche Elemente. Ob als Info bei einem Button oder auf einer Imagemap: mit qTip kann man das sehr einfach umsetzen.
Besucht einfach mal http://craigsworks.com/projects/qtip2 und schaut euch die Demos an! Es wird sich lohnen 
PS: Auf dem iPad funktionieren die Tooltips auch wunderbar!
Gestreifte Tabelle mit JavaScript Teil 1
Jeder kennt den Effekt der gestreiften Tabelle. Sind die Zeilen abwechselnd in unterschiedlichen Farben, verliert man nicht so einfach den Überblick. Oftmals wird diese nette optische Unterstützung serverseitig (z.B.: in PHP) gelöst, aber manchmal ist es doch einfacher es mit JavaScript zu erledigen.
Doch wie macht man das nun einfach in JavaScript? Ich werde nun erklären wie das geht und einige Erweiterungen dazu geben.
Ich möchte hier kurz erwähnen, dass ich auch einige Ideen aus dem Internet habe, jedoch die Quellen nicht mehr finden kann! Sollte ich die Seite finden die mir den Anstoß gegeben hat, werde ich sie natürlich als Quelle führen!
Leider gibt es das Problem, dass CSS Eigenschaften auf der Tabellenreihe nicht ziehen. Deswegen färben wir jede Tabellendata (<td>) einzeln.
/**
* Funktion zum streifen einer Tabelle
* @param id: Die Tabelle muss über eine ID verfügen und die wird hier übergeben
*/
function stripe(id) {
//Variable fürs Farbwechseln
var even = false;
//Farbe für ungerade Zeilen
var evenColor = "#ffffff";
//Farbe für gerade Zeilen
var oddColor = "#eeeeff";
//Wir holen uns das Objekt der Tabelle
var table = document.getElementById(id);
//Wenn wir keine Tabelle erhalten haben, dann ist hier Ende
if(! table) { return; }
//Wir wollen nur den Tabllenbody streifen.
var tbodies = table.getElementsByTagName("tbody");
//Wichtig hier ist es, dass es laut Definition mehrere tbodys geben kann! Deswegen die Schleife
for (var h = 0; h < tbodies.length; h++) {
//Wir holen uns die Reihen
var trs = tbodies[h].getElementsByTagName("tr");
//Wir laufen eine Reihe nach der anderen durch
for (var i = 0; i < trs.length; i++) {
//Wir laufen nun alle Tabellendata durch
for (var j = 0; j < tds.length; j++) {
//Jetzt noch schnell den Hintergrund färben
tds[j].style.backgroundColor = even ? evenColor : oddColor;
}
//Farbwechsel realisieren
even = ! even;
}
}
}
Ist jetzt glaube ich nicht so schwer. Deswegen werden wir diese Funktion erweitern!
Nehmen wir einmal an, wir wollen über ein PHP Script bestimmte Zellen schon vorfärben die unsere Funktion nicht ändern soll. Das heißt es sollen nur die geändert werden die keine Hintergrundfarbe besitzten.
Auch das ist noch relativ einfach gemacht. Wir müssen dazu nur eine if verzweigung vor dem färben hinzufügen
for (var j = 0; j < tds.length; j++) {
if(!tds[j].style.backgroundColor){
tds[j].style.backgroundColor = even ? evenColor : oddColor;
}
}
Das war einmal Teil I des Berichts. Im zweiten Teil zeige ich euch dann, wie man markierungen von Zeilen mit einer erweiterten Variante der Funktion realisieren kann.
Ebenso zeig ich euch eine Einfach variante mit der man auf unterschiedlichen Farben reagieren kann.
Denn leider ist es nicht möglich mit einem
if(tds[j].style.backgroundColor == "#FFFFFF")
zu vergleichen. Vor allem weil wenn man mit einem
alert(tds[j].style.backgroundColor);
Im InternetExplorer den Hexwert erhält und im FireFox einen rgb wert.
Freut euch schon auf Teil 2
AJAX light – Kleine Abfragen ohne großes Framework
AJAX ist eine nette Sache! Dieses Akronym steht für „Asynchronous JavaScript and XML“ und ermöglicht unter anderem dynamisches Nachladen von Inhalten in die HTML Seite. Wer sich ganz genau dafür interessiert, kann ja auf WIKIPEDIA nachschauen
Natürlich findet man jetzt eine große Menge an Bibliotheken die man nutzen kann und sollte, aber hier möchte ich euch eine Quick and Dirty Lösung zeigen.
//AJAX Initialisieren und Funktionen zur Handhabung
var request = false;
// Request senden
function setRequest(url,send,irfunction) {
// Request erzeugen
if (window.XMLHttpRequest) {
request = new XMLHttpRequest(); // Mozilla, Safari, Opera
} else if (window.ActiveXObject) {
try {
request = new ActiveXObject('Msxml2.XMLHTTP'); // IE 5
} catch (e) {
try {
request = new ActiveXObject('Microsoft.XMLHTTP'); // IE 6
} catch (e) {}
}
}
// überprüfen, ob Request erzeugt wurde
if (!request) {
alert("Kann keine XMLHTTP-Instanz erzeugen");
return false;
} else {
// Request öffnen
request.open('post', url, true);
// Requestheader senden
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// Request senden
request.send(send);
// Request auswerten
request.onreadystatechange = function() {
interpretRequest(irfunction);
}
}
}
// Request auswerten
function interpretRequest(irfunction) {
switch (request.readyState) {
// wenn der readyState 4 und der request.status 200 ist, dann ist alles korrekt gelaufen
case 4:
if (request.status != 200) {
alert("Der Request wurde abgeschlossen, ist aber nicht OKnFehler:"+request.status);
} else {
irfunction();
}
break;
default:
break;
}
}
//ENDE AJAX Funktionen
Wie verwendet man diese Funktionen nun richtig?
Angenommen wir haben eine Formular bei dem sich ein User registrieren muss und wir wollen checken ob der Nick schon vorhanden ist.
Dazu verwenden wir eine PHP Datei, die auf im selben Ordner liegt und abfrage.php heißt. Diese macht uns eine MYSQL Abfrage und liefert uns dann false zurück, wenn der Nickname schon vorhanden ist. Die 2 JavaScript Funktionen die wir zusätzlich noch in der HTML Datei brauchen sind folgende:
function check_name(nick) {
//Request abschicken mit Post Variable Nickname
setRequest("/abfrage.php","nickname="+nick,check_name_finish);
}
function check_name_finish() {
var content = request.responseText;
//Do something
}
Die Funktion check_name(nick) wird vom Inputfeld aufgerufen, wenn dieses nicht mehr beschrieben wird. (siehe Code vom Inputfeld). Ist Funktion check_name(nick) mit der Ausführung fertig, wird Funktion check_name_finish() aufgerufen und ausgeführt. Diese hat nun in der Variable content die Antwort der Abfrage und kann nun darauf reagieren.
Und das Inputfeld würde so aussehen:
<input type="text" name="nickname" value="" onblur="check_name(this.value)">
Wie bereits erwähnt ist das hier nur Quick and Dirty! Getestet habe ich es mit den neuesten Versionen von IE und FireFox. Viel Spass damit!
Variable Variablennamen in PHP
Ofmals kann es sehr Hilfreich sein, wenn man die Variablennamen variabel angeben kann. Dies ist in PHP sehr einfach möglich indem man noch ein zusätzliches $ vorransetzt.
$var = "test"; $test = "Hallo"; echo $$var;
Dieses Beispiel liefert ein schönes “Hallo” zurück.
Das ganze kann man sogar noch besser nutzen!
Besitzt man zum Beispiel mehrere Variablen die sich nur am Schluss durch eine Zahl unterscheiden (z.b.: Feld1, Feld2, Feld3, Feld4) so kann man diese schnell in ein Array umwandeln!
$Feld1 = "Das";
$Feld2 = " ist";
$Feld3 = " ein";
$Feld4 = " Test";
for($i=1;$i<=4;$i++){
$array[$i] = ${"Feld".$i};
echo $array[$i];
}
Dieses Beispiel gibt “Das ist ein Test” zurück.
Einfach oder? 
