Ajaxschmiede.de

DOMAssistant stellt ähnlich wie jQuery einige sehr leistungsstarke Funktionen zur Verfügung. Die Syntax der beiden Javascript-Bibliotheken ist sehr ähnlich aufbaut. Im Unterschied zu jQuery besteht DOMAssistant aus mehreren Modulen, die man auch einzeln, je nach Bedarf, einbinden kann.

Folgende Module stehen zur Verfügung:

• DOMAssistant.Core
• DOMAssistant.AJAX
• DOMAssistant.Content
• DOMAssistant.CSS
• DOMAssistant.Events
• DOMAssistant.Load

Durch das Einbinden der benötigen Module spart man Traffic und verkürzt damit auch die Ladezeit der Seite, weil wirklich nur das benutze geladen wird.

Das Core-Modul stellt die grundlegenden Funktionen für DOMAssistant zur Verfügung und muss eingebunden werden. Hauptbestandteil davon ist der $-Operator, der benutzt wird um in verkürzter und sehr flexibler Notation auf Elemente zuzugreifen. Des weiteren bietet Core noch die Funktionen elmsByClass, elmsByAttribute, elmsByTag und each um über den Class-, Attribut- und Tag-Namen Elemente manipulieren zu können.

Das Content-Modul bringt einige Funktionen mit um auf den Inhalt von Elementen Einfluss zu nehmen. Im Einzelnen wären dies die Methoden: prev, next,create, setAttributes, addContent, replaceContent und remove. So ist es zum Beispiel mit create möglich relativ einfach neue Elemente samt Attributen zu erzeugen und an beliebiger Stelle in das Dokument zu integrieren.

Die anderen Module bieten spezielle Methoden um das Manipulieren von CSS, das Event-Handling und den Umgang mit Ajax zu vereinfachen.

Für mich als ein Blogger, der häufig Code-Schnipsel postet, ist es ziemlich umständlich den Code ansprechend formatiert im Blog zu präsentieren. Vor allem What You See Is What You Get-Editoren neigen gern dazu, sämtliche Einrückungen zu entfernen.

Das SyntaxHighlighting-Plugin für WordPress eignet sich sehr gut zum Hervorheben der Codesyntax. Einrücken lässt sich der Code jedoch nicht bzw. nur einem zusätzlichen Editor wie z.B. EditPlus. Man formatiert den Code in EditPlus und fügt ihn dann im Code-Modus des WordPress-Editors ein. Sobald man den Beitrag wieder bearbeitet, verschwindet die Code-Formatierung jedoch. Die einzige Möglichkeit wäre, den Beitrag direkt in der Datenbank (bspw. über phpMyAdmin) zu bearbeiten.

Diesem Umstand wollte ich mich nicht beugen und schrieb eine Javascript-Funktion, die von automatisch sämtliche Einrückungen zur Formatierung vornimmt. Das Ergebnis kann man in folgender Demoseite ansehen. Das Script funktioniert mit CSS, (X)HTML, XML, Javascript und im Grunde jeder Programmiersprache, die eine C-ähnliche Syntax aufweist.
Die Funktionsweise des Scriptes ist schnell erklärt.

Die Funktion autoIndent erwartet als Parameter den Pfad zu dem Element, in dem der automatisch einzurückende Code steht. Das Script holt sich den Code und schreibt diesen zeilenweise in ein Array. Dieses Array wird in einer Schleife durchlaufen, dabei wird jedes Feld (sprich jede Zeile) zuerst von bisherigen Einrückungen befreit und anschließend mit einer neuen Formatierung versehen. Die Variable indents speichert die Anzahl der Einrückungen von links. Beispielsweise, wenn man sich in der 2. {-Klammer befindet, müssen die folgenden Zeilen bis zu }-Klammer um 2 eingerückt werden. Die Anzahl der Einrückungen holt sich die Funktion über die Anzahl der {-Klammern respektive Tags. Zum Erkennen der Klammern und Tags verwendete ich reguläre Ausdrücke.

Die komplette, unkommentierte Funktion sieht so aus:

function autoIndent( path ) {
indents = 0;
code = path.innerHTML;
eArray = code.match( /(.*)\r\n|(.*)(\n)?/gi );
code = „“;

for ( var i = 0; eArray[i]; i++ ) {
eArray[i] = eArray[i].replace(/\r|\n|\n\r|\n\r/gi, „“);
eArray[i] = eArray[i].replace(/^([\s]| | )*/, „“);

if ( eArray[i].match(/\}|<\/[\w]+>/i) && indents > 0) {
eLength = eArray[i].match(/\}|<\/[\w]+>/gi).length;
indents -= eLength;
if ( indents < 0 ) indents = 0; } if ( navigator.appName.indexOf("Internet Explorer") > 0 && i != 0 ) code += „
„;

if ( i != 0 ) code += „\n“;

if ( eArray[i] != „“ ) {
for (var j = 0; j < indents ; j++ ) { code += "    "; } } else { code += " "; } if ( ( eArray[i].match(/\<[\w]+>/i) && eArray[i].match(/\<\/[\w]+>/i) ) || eArray[i].match(/[\w\s;:]+\}/i) ) code += "    "; code += eArray[i]; if ( eArray[i].match(/\{|<[\w]+>/i) ) { indents++; } } path.innerHTML = code; } [/source] Ich habe die Funktion im Internet Explorer (5.01, 5.5, 6 und 7), Firefox (2.0.0.11), Opera (9.50 Beta) und Safari (3.0.4) erfolgreich getestet. Als nächstes werde ich versuchen die Funktion in das oben genannte SyntaxHighlighting-Plugin zu integrieren oder zumindest dafür zu sorgen, dass beide parallel zu einander benutzt werden können.

In Anlehnung an den Bericht von Mark Wilton-Jones über die Ermittlung der Fenstergröße (sowohl Höhe als auch Breite) und der Scrollposition möchte ich hier ebenfalls darüber berichten.

Grundsätzlich bestehen 3, zum Teil sehr Browser- und Browsemodusabhänige, Funktionen zum Auslesen der Höhe und Breite des angezeigten Fensters mittels Javascript.

window.innerHeight / window.innerWidth

– Unterstützt von den meisten Browsern, jedoch nicht vom Internet Explorer

document.body.clientHeight / document.body.clientWidth

– Unterstützt von vielen DOM-fähigen Browsern, einschließlich des Internet Explorers.

document.documentElement.­clientHeight / document.documentElement.­clientWidth

– Unterstützt von den meisten DOM-fähigen Browsern, einschließlich des Internet Explorers.

Entsprechend dem Grundwissen und der Tabelle auf howtocreate.co.uk bezüglich der Unterstützung in den verschiedenen Browserversionen baut man sich eine Javascript-Funktion zum Auslesen der Größenangabe des Anzeigefensters zusammen:

function getSize() {
	var myWidth = 0, myHeight = 0;

	if( typeof( window.innerWidth ) == 'number' ) {
		//Non-IE
		myWidth = window.innerWidth;
		myHeight = window.innerHeight;
	} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
		//IE 6+ in 'standards compliant mode'
		myWidth = document.documentElement.clientWidth;
		myHeight = document.documentElement.clientHeight;
	} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
		//IE 4 compatible
		myWidth = document.body.clientWidth;
		myHeight = document.body.clientHeight;
	}
	return [ myWidth, myHeight ];
}

Um die Auszulesen wie weit auf einer Seite gescrollt wurde, verfährt man ganz ähnlich. Wieder stehen 3 Funktionen zur Verfügung.

window.pageYOffset / window.pageXOffset

– Unterstützt von den meisten Browsern, jedoch nicht vom Internet Explorer

document.body.scrollTop / document.body.scrollLeft

– Unterstützt von den einigen Browsern, einschließlich des Internet Explorers.

document.documentElement.scrollTop / document.documentElement.scrollLeft

– Unterstützt von den einigen Browsern, einschließlich des Internet Explorers (strict-mode).

Auch diesmal erstellt entsprechend diesem Wissens eine Javascript-Funktion, die uns die gewünschten Werte liefert:

function getScrollXY() {
	var scrOfX = 0, scrOfY = 0;

	if( typeof( window.pageYOffset ) == 'number' ) {
		//Netscape compliant
		scrOfY = window.pageYOffset;
		scrOfX = window.pageXOffset;
	} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
		//DOM compliant
		scrOfY = document.body.scrollTop;
		scrOfX = document.body.scrollLeft;
	} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
		//IE6 standards compliant mode
		scrOfY = document.documentElement.scrollTop;
		scrOfX = document.documentElement.scrollLeft;
	}
	return [ scrOfX, scrOfY ];
}

Landkarten werden auf Webseiten immer wieder gebraucht. Wäre es nicht schön, wenn man bestimmte Gebiete beim Mouseover hervorheben könnte? Das von Christian Effenberger entwickelte Javascript Mapper.js 1.0 macht dies möglich. Diese Bibliothek ermöglicht das Hervorheben von Flächen einer verweis-sensitiven Grafik (einer so genannten „Image Map“).

Die Nutzung dieser Bibliothek ist sehr einfach. Zuerst muss sie im Header der Seite eingebunden werden:

<script type="text/javascript" src="mapper.js"></script>

Danach definieren wir die Image Map:

<img class="mapper noborder iopacity50 icolorff0000" src="my_image.jpg" usemap="#my_map" width="343" height="425" border="0" alt="" />
<map name="my_map">
<area shape="poly" title="Titel des Bereiches" coords="295,341, 296,337, 293,336, <!-- weitere Koordinaten -->" alt="Titel" />
<!-- alle weiteren Bereiche-->
<area ... />
</map>

Den einzigen Nachteil sehe ich darin, dass es aufwendig ist, die hervorzuhebenden Bereiche zu definieren.

Mit einem Klick auf die Grafik gelangt man zu Demos auf der Entwicklerseite.

Die Seite Coding Horror veröffentlichte vor wenigen Tage einen für Javascript- und im speziellen Ajax-Entwickler interessanten Performancevergleich der Browser in Sachen Ausführungsgeschwindigkeit von Javascript. Der mit Hilfe des Javascript-Benchmarks Sunspider erstellte Bericht testete die aktuellen Browser (Firefox 2, Opera 9.5, Internet Explorer 7 und Safari 3.0.4) u.a. in den Bereichen 3D-Rendering (Fließkommaberechnung), mathematische Funktionen, reguläre Ausdrücke, Kontrollstrukturen und String-Funktionen. Dabei stellte sich heraus, dass der sehr beliebte und kostenlose Firefox nur dank des schlechten String-Handlings des Internet Explorer 7 nicht auf dem letzten Platz landete. In 3 der 8 Szenarien schnitt der Firefox deutlich schlechter als die Konkurrenz ab, vor aber im Umgang mit Bit-Operationen.

Der komplette Test kann bei den Kollegen von www.codinghorror.com angesehen werden.

Vor kurzem hatten wir über die Javascript Cover Flow Bildergalerie „ImageFlow 0.6“ berichtet. Nun wurde die Version 0.7 veröffentlicht.

Die aktuelle Version bringt folgende Änderungen mit sich:

• es wurden verschiedene Cursor-Typen hinzugefügt
• es wurden Konfigurations-Variablen hinzugefügt
• Änderungen in der Implementierung: der gesamte Javscript Code wurde in einer einzelnen Datei (imageflow.js) zusammen geführt
• die Bildunterschrift wird direkt im alt Attribut des <img> Tag definiert

ImageFlow 0.7 runterladen

Einfach auf das Foto klicken, um zu einer von mir erstellten Demo zu gelangen.

Beim Stöbern durch die bunte Internetwelt stieß ich auf ein relativ einfaches Javascript-Tabmenü, das auf den Namen Tabtastic hört, und habe dazu ein eigenes Beispiel erstellt. Der Aufbau ist schnell erklärt.

Im HTML-Header werden folgende Javascript-Dateien verlinkt:

<script src="addclasskillclass.js" type="text/javascript"></script>
<script src="attachevent.js" type="text/javascript"></script>
<script src="addcss.js" type="text/javascript"></script>
<script src="tabtastic.js" type="text/javascript"></script>

In der tabtastic.js habe ich die 89. Zeile mit dem Aufruf der AddStyleSheet-Funktion auskommentiert und die css-Datei per Hand eingebunden.

<link href="tabtastic.css" rel="stylesheet" type="text/css" />

Um Problemen mit der Schriftgröße aus dem Weg zu gehen, habe ich selbst noch einige css-Angaben in den HTML-Head eingefügt:

body {
	font-family:arial,serif;
	background-color:#eee;
}
.tabset_tabs {
	font-size: 15px;
	line-height: 115%;
}
#tabmenu div{
	width: 500px;
}

Man definiert in HTML eine Liste und steckt den Tabinhalt in div-Container. Das sieht dann wie folgt aus:

<ul class="tabset_tabs">
<li><a href="#tab1" class="active">Latein (alt)</a></li>
<li><a href="#tab2">Latein (neu)</a></li>

<li><a href="#tab3">Übersetzung</a></li>

<li><a href="#tab4">Autor</a></li>
</ul>
<div id="tab1" class="tabset_content">
<h2 class="tabset_label">Tab 1</h2>
<-- Inhalt -->
</div>
<div id="tab2" class="tabset_content">
<h2 class="tabset_label">Tab 2</h2>
<-- Inhalt -->
</div>
<div id="tab3" class="tabset_content">
<h2 class="tabset_label">Tab 3</h2>
<-- Inhalt -->
</div>
<div id="tab4" class="tabset_content">
<h2 class="tabset_label">Tab 4</h2>
<-- Inhalt -->
</div>

Das definierte h2-Element in den Containern wird intern benötigt, ist jedoch nicht sichtbar.

Vor kurzem berichteten wir über Google`s neue Chart API. Wer sich mit der API schon einmal auseinander gesetzt hat, hat sicher gemerkt, dass sich Diagramme sehr leicht erstellen lassen. Sobald das Diagramm umfangreicher wird, wird es jedoch komplizierter den richtigen Link zusammen zu bauen, der dann an die Google Chart API geschickt wird.

Jetzt gibt es dafür die ultimative Unterstützung, den Chart Maker. Der Chart Maker bietet eine grafische Benutzeroberfläche, über die sich die Konfiguration für das Diagramm festlegen lässt. Mit einem Klick auf den Button „GET CHART“ lässt sich auch sofort eine Diagramm-Vorschau generieren. Ebenso wird der fertige Link für den <img> Tag erzeugt, den man nur noch kopieren und an die gewünschte Stelle einfügen muss.

Der Code des Chart Maker wurde bei Google Code veröffentlicht.

Hier ein Screenshot:

John Dyer hat eine Möglichkeit entwickelt, 3D Panoramas mit Javascript zu erstellen.

Das Script erzeugt aus einem großen Panorama eine Reihe von div Elemente. Diese Elemente werden mit Kopien von dem Ausgangsbild gefüllt. Die div Elemente werden dann entlang einer Sinus-Kurve verzerrt, sodass ein optischer 3D Effekt entsteht.

Es sind verschiedene Krümmungswinkel, wie auch die Fischaugen-Prespektive möglich.

Das Panorama Script befindet sich noch im Experimentierstatus und funktioniert momentan leider nur im Firefox. Dennoch ist es lohnenswert, sich das anzuschauen.

Hier geht zu einer Demo:

Mit übergroßen Inhalten hat man als Webmaster öfters mal zu tun. Dabei stellt man stets die Frage, wie man damit umgeht. Ich habe für dieses Problem eine div- und javascript-basierte Scroll-Funktion geschrieben, die es ermöglicht – ähnlich einem iframe – innerhalb des übergroßen Inhalts zu scrollen. Innerhalb des Inhalts ist ein Steuerkreuz zu sehen, dass im Ausgangszustand halbtransparent ist und erst beim Überfahren mit der Maus voll sichtbar wird. Das Steuerkreuz selbst ist eie Areamap.

Diese Funktion würde sich auch anbieten um einen Live-Ticker oder ähnliches zu realisieren.

Eine kleine Demonstration des Scriptes in Aktion kann man auf diesem Link hier sehen.

Wichtigster Bestand ist die Javascript-Funktion zum bewegen des Inhalts-div.

function moveDIV( var1, var2 ) {
	if ( var1 == 0 ) {
		document.getElementById("zeug").style.left = "0px";
		document.getElementById("zeug").style.top = "0px";
	} else {
		if ( var2 ) {
			/* alter Wert ohne Einheit */
			var2 = document.getElementById("zeug").style.left;
			var2 = Number(var2.substring(0, var2.length-2));
			var3 = document.getElementById("zeug").style.width;
			var3 = Number(var3.substring(0, var3.length-2));
			var4 = document.getElementById("tool").style.width;
			var4 = Number(var4.substring(0, var4.length-2));
			// wenn links am rand angekommen
			if ( var2 + var1 <= 0 ) {
				if ( var2 + var1 > -var3 + var4 ) {
					document.getElementById("zeug").style.left = var2 + var1 + "px";
				} else {
					document.getElementById("zeug").style.left = -var3 + var4 + "px";
				}
			}
		} else {
			/* alter Wert ohne Einheit */
			var2 = document.getElementById("zeug").style.top;
			var2 = Number(var2.substring(0, var2.length-2));
			// wenn links am rand angekommen
			if ( var2 + var1 <= 0 )	{
				document.getElementById("zeug").style.top = var2 + var1 + "px";
			}
		}
	}
}
&#91;/source&#93;

Diese Funktion unterscheidet, ob ein Benutzer vertikales oder horizontales Scrollen aktiviert hat. Aufgerufen wird die Funktion mittels folgenden Maus-Ereignissen, die die Scrollfuntion bei gedrückhalten der rechten Maustasten in 15 Millisekundentakt aufruft und dabei um jeweils 5px den Inhalt bewegt:

&#91;source language='javascript'&#93;
onmousedown="aktiv = window.setInterval('moveDIV(5, true)', 15); "
onmouseup="window.clearInterval(aktiv);
&#91;/source&#93;

Damit der Benutzer das Überfahren bemerkt, wird per Javascript der Mauszeiger verändert. Um einige Problemfälle auszuschließen und sicherzustellen, dass nur eine Intervallfunktion nur einmal ausgeführt wird, habe ich auch noch nachfolgende Eventhandler eingebaut:

&#91;source language='javascript'&#93;
onmouseover="this.style.cursor='pointer';"
onmouseout="if (aktiv) window.clearInterval(aktiv);
&#91;/source&#93;

Allgemein wird das div-Gerüst wie folgt eingebaut. An oberster Stelle wird das tool-div als Elternelement definiert.

&#91;source language='html'&#93;
<div id="tool" style="width: 500px; height: 200px; overflow: hidden; border: 1px solid gray; position: relative; ">

Anschließend wird das Menü eingebunden.

<div id="steuerung" style="position: absolute; top: 0px; left: 0px; margin-left: 420px; margin-top: 5px; z-index: 100; opacity: 0.2; filter: alpha(opacity=20); " onmouseover="fadeDIV(10); " onmouseout="fadeDIV(2); ">
<img src="kreuz.gif" alt="" usemap="#kreuz" border="0" />
<map name="kreuz">
<area shape="rect" coords="1,26,22,48" onmouseover="this.style.cursor='pointer';" onmousedown="aktiv = window.setInterval('moveDIV(5, true)', 15); " onmouseup="window.clearInterval(aktiv); " onmouseout="if (aktiv) window.clearInterval(aktiv); " alt="nach links" title="nach links" />
<area shape="rect" coords="53,26,74,48" onmouseover="this.style.cursor='pointer';" onmousedown="if (aktiv) window.clearInterval(aktiv); aktiv = window.setInterval('moveDIV(-5, true)', 15); " onmouseup="window.clearInterval(aktiv); " onmouseout="if (aktiv) window.clearInterval(aktiv); " alt="nach rechts" title="nach rechts" />
<area shape="rect" coords="28,1,47,22" onmouseover="this.style.cursor='pointer';" onmousedown="if (aktiv) window.clearInterval(aktiv); aktiv = window.setInterval('moveDIV(5, false)', 22); " onmouseup="window.clearInterval(aktiv); " onmouseout="if (aktiv) window.clearInterval(aktiv); " alt="nach oben" title="nach oben" />
<area shape="rect" coords="28,52,47,74" onmouseover="this.style.cursor='pointer';" onmousedown="if (aktiv) window.clearInterval(aktiv); aktiv = window.setInterval('moveDIV(-5, false)', 22); " onmouseup="window.clearInterval(aktiv); " onmouseout="if (aktiv) window.clearInterval(aktiv); " alt="nach unten" title="nach unten" />
<area shape="rect" coords="28,26,47,48" onmouseout="if (aktiv) window.clearInterval(aktiv); " onmouseover="this.style.cursor='pointer';" onclick="moveDIV(0)" alt="Ausgangsansicht" title="Ausgangsansicht" />
</map>
</div>

Danach wird noch das Kind-div mit dem Inhalt eingebettet und alle offenen divs werden geschlossen..

<div id="zeug" style="width: 1000px; margin-left: 0px; position: absolute; top: 0px; left: 0px;">
<-- INHALT -->
</div>
</div>