Der Lanwirt

Archive for the ‘JS’ Category

Vor kurzem habe ich das Projekt BasisBibel entdeckt. Dabei handelt es sich um eine neue Bibelübersetzung, die besonders für neue Medien optimiert ist.
Außerdem gibt es die Möglichkeit aus Webseiten heraus direkt auf Bibelstellen in der BasisBibel zu verlinken. Entweder per herkömmlichem Link oder per JavaScript-Popup. Ich fand das Interessant für die Dynamis-Webseiten und habe kurzerhand beide Möglichkeiten der Verlinkung kombiniert:

Mit einem kleinen JavaScript ist es so möglich, einen gewöhnlichen Link auf eine Bibelstelle gleichzeitig zum Popup-Link zu machen. Diese Links sind “onobtrusive”, sprich: Sowohl für Mensch, als auch für Maschine (z.B. Google), mit oder ohne Javascript zugänglich.

Ein gewöhnlicher Link auf eine Bibelstelle sieht so aus:
<a href="http://www.basisb.de/bibel/Mt%202,1">Matthäus, Kapitel 2, Vers 1</a>

Der Popuplink sieht ganz ähnlich aus:
<a href="http://www.basisb.de/bibel/Mt%202,1" class="basisb-bibelstelle">Matthäus, Kapitel 2, Vers 1</a>

Über die Klassendefinition wird festgelegt, wie das Popup aufgehen soll. Entweder nur die Bibelstelle (“basisb-bibelstelle”) oder die Bibelstelle mit Kontext (“basisb-bibeltext”).

Ach ja, hier sieht man das Script im Praktischen Einsatz:
http://www.dynamis4u.de/programm/

Einbau in die Seite

• Beispiel und JavaScript runterladen: basisb2_10.zip
• Die beiden Javascripts in HTML einbinden (siehe index.htm)
• … und schon funktioniert das mit den Links

Wenn man mit Javascript am DOM des aktuellen Dokuments arbeitet, ist man schnell so weit, dass man sieht, dass etwas nicht richtig angezeigt wird, man hat jedoch keine Ahnung, warum nicht. Ein Blick in den Quellcode wäre hilfreich, allerdings ist der Quellcode, den der Browser zeigt, nicht wirklich hilfreich, da dies der Status des Dokuments bei der Auslieferung vom Server war.

Bislang habe ich mir immer mit der Option “View Generated Source” in der Firefox-Web Developer Extension beholfen. Das Dumme daran ist dass die Formatierung nicht toll ist, sodass ich sie oft in UltraEdit gerade gezogen habe, um an meine Information zu kommen.

Vor kurzem wurde ich auf eine neue Firefox-Erweiterung hingewiesen: “View Source Chart“. Das Source Chart bettet sich neben der Quellcodeansicht im Firefox ein und man hat die Wahl, ob man dem Code sehen will, wie er vom Server kan oder ob man den des aktuellen DOMs haben möchte. Außerdem schön: Der Quellcode wird schön aufbereitet und es lassen sich auch Bereiche zu klappen.

Nachtrag:

Mittlerweile verwende ich Firebug, weil es alle mächtiger ist, als alles, was ich bisher in dieser Richtung gesehen habe.