Ajaxschmiede.de

Während der Weiterentwicklung an meiner Demoseite zur Darstellung von mathematischen Funktionen durch Javascript, stieß ich auf einige Ungereimtheiten der in der Schleife verwendeten Laufvariablen i. Eine genauere Überprüfung brachte für mich völlig unerklärliche Werte zum Vorschein. Die einfache Gleichung 0.2 + 0.1 ergab nicht wie erwartet 0.3 sondern 0.30000000000000004.

Ich konnte es mir absolut nicht erklären, woher dieser – in meinen Augen – Fehler zu Stande kam. Ich schloß sämtliche Fehlerquellen aus. Als dies auch nichts half, beschloss ich der Sache auf den Grund zu gehen – ohne vorher zu ahnen, dass ich mit meiner so simplen Rechnung auf eine in Kauf genommene Schwachstelle unserer heutigen schnellen Computertechnik gestoßen war. Doch der Reihe nach.

Als erstes sei klargestellt, dass die nachfolgend beschriebene Ungenauigkeit nur bei Kommarechnung auftriit – da jedoch in jeder Programmiersprache, egal ob Javascript, PHP oder C. Integerzahlen bleiben davon gänzlich unberührt.

Um das angesprochene Problem deutlich zu machen, habe ich eine Testseite erstellt, auf der man eine Tabelle sieht, in deren linken Spalte sich die Zahlenwerte von 0 bis „ungefähr 1.9“ befinden. Die Werte werden in einer for-Schleife mit dem Startwert 0, der Abbruchbedingung kleiner-gleich 2 und einer Erhöhung der Laufvariable um jeweils 0.1 pro Durchlauf erzeugt und via jQuery an die Tabelle angehangen.

Wie man unschwer erkennen kann, weichen eine Vielzahl der in der linken Tabellenhälfte stehenden Werte geringfügig vom erwarteten Wert ab. Es tritt eine Ungenauigkeit auf.

Die Ursache des „Problems“ liegt in der binären Darstellung von Zahlen innerhalb von Programmen. So wird die Zahl 15 intern als 00001111 im Speicher abgelegt. Das selbe geschieht auch mit Kommazahlen, jedoch kann es dabei zu Ungenauigkeiten in der Darstellung kommen, da eine Vielzahl gebrochenener Zahlen binär periodisch abgebildet wird. So entspricht 0.1 im Dualsystem der Ziffer 1.1001 E-101, wobei E den Exponenten symbolisiert.

Eine ausführliche Abhandlung findet man auf DCLJS.

Um in Javascript dem Problem ein wenig aus dem Weg zu gehen, nutze ich die numlib-Bibliothek, die unter anderem eine Funktion namens dezRound zum Runden einer beliebigen Anzahl von Nachkommastellen zur Verfügung stellt. Mit dieser Funktion stelle ich sicher, dass Zahlen mit relativ wenigen Nachkommastellen genau angegeben werden – ich entschied mich auf 9 Stellen zu runden. Leider baue ich dadurch bei längeren gebrochenen Zahlen selbst eine Ungenauigkeit durch das Runden ein, die ich aber in meinem Fall in Kauf nehme.

Angeregt durch einen Artikel von Lutz Tautenhahn über das Zeichnen von Diagrammen und Funktionen mittels Javascript überlegte ich mir, ob es mit Hilfe der Javascript-Bibliothek flot, über die wir bereits berichteten, nicht ebenso möglich ist, mathematische Funktionen darzustellen.

Bereits nach kurzer Zeit hatte ich es geschafft, meine erste Funktion mittels Javascript und flot zu zeichnen. Als mathematisch geprägter Mensch war ich mit den Kompromissen, die ich in Bezug auf das Aufstellen von Gleichungen eingehen musste, jedoch nicht zufrieden und wollte Abhilfe schaffen.

Um es vorweg zu nehmen: Ich hatte Erfolg. Das Ergebnis meiner Bemühungen kann man in dieser Demonstration sehen, die es auch erlaubt komplexere Funktionen zu visualisieren

Das Script macht massiven Gebrauch von regulären Ausdrücken – zum einen um die eingegebene Funktion zu überarbeiten, zum anderen zum darstellen.

Kernstück des Zeichnens von Gleichungen ist die folgende for-Schleife, die einerseits die Aufgabe hat das x in der Funktion bei jedem Durchlauf gegen den Zählerwert zu ersetzen und andererseits das benötige Array, das an flot übergeben wird, bestehend aus x- und y-Wert aufzubauen:

for ( var i = startwert; i <= endwert; i += schrittweite ) { ausgabe = funktion.replace(/x/gi, i); var1.push([i, eval(ausgabe)]); } [/source] Das übrige Javascript dient, wie bereits erwähnt, dazu das Aufstellen von Funktionen sehr zu vereinfachen und für den Menschen intuitiver zu gestalten. Reguläre Ausdrücke übersetzen diese Kürzel und Kurzschreibungweisen in für den Browser verständliche Operationen. Folgende Vereinfachungen habe ich implementiert:

• 2x anstatt 2*x
• x(x+2) anstatt x*(x+2)
• x[5] bzw. (x+2)[5] anstatt Math.pow(x, 5) bzw. Math.pow(x+2, 5) zum Potenzieren
• ² und ³ wird akzeptiert
• Leerzeichen können beliebig gesetzt werden
• gebrochene Zahlen können sowohl mit , als auch mit . geschrieben werden

Ich werde an meinem Script weiter arbeiten, da ich noch etliche Ideen habe, die ich gern umsetzen will.

Unter anderem z.B.

• Anzeigen von mehr als einer Gleichung
• Bilden von Ableitungen und Stammfunktion
• Darstellen einer Funktionenschar (Funktion mit 2 Variablen)
• Scrollen innerhalb der Grafik
• Angabe von Extrema und Wendepunkten (Annäherung oder Gleichung) und Markieren dieser
• Möglichkeit des Einzeichnens der Tangente an einen Punkt (samt Funktion?)

Zur Demoseite

Pünktlich zu seinem 2. Geburtstag bringt jQuery mit der Version 1.2.2 ein Update zur Fehlerkorrektur für jQuery 1.2 Im Framework wurden Fehler behoben und Optimierungen vorgenommen.

Hier die wichtigsten Änderungen:

300% schnellere Ausführung von $(DOMElement)-Zugriffen

Es wurde speziell die Nutzung ein DOM Element in der jQuery Funktion zu durchlaufen beschleunigt. Die Ausführungsgeschwindigkeit unterscheidet sich jedoch von Browser zu Browser.

.ready() Überarbeitung

• ready-Ereignis im Internet Explorer spürbar verbessert.
• Alle Browsers warten jetzt bis CSS bereit ist, ebenso wie es bisher bei DOM der Fall war.
• Es ist jetzt möglich das ready-Ereignis über die normale .bind()-Funktion anzusprechen.

.bind(„mouseenter“) / .bind(„mouseleave“)

Die .hover() Funktion wurde in zwei neue Cross-Browser-Ereignisse geteilt: mouseenter und mouseleave. Diese unterscheiden sich von mouseover und mouseout in sofern, dass diese Ereignisse greifen sobald ein Kind-Element „betreten“ und verlassen wird (was gewöhnlich nicht erwünscht ist).

.bind(„mousewheel“)

Brandon Aaron hat ein Plugin geschrieben, basierend auf der neuen Event API, welches die Unterstützung von Mausrad-Ereignissen ermöglicht.

Complex :not()

Obwohl es nicht Teil der CSS 3 Spezifikation ist, wird nach dieser Funktionalität häufig gefragt. Jetzt können komplexe Ausdrücke in :not() Selektoren gemacht werden.

Akzeptieren von Headern

Für normale jQuery Ajax-Operationen wird jetzt ein extra Accept-Header gesendet, um dem Server mitzuteilen nach welche Art von Inhalt wir suchen. Wenn man ein dataType-Argument festlegt, kümmert sich jQuery um alle Header-Einstellungen. Aktuell werden folgende Header für jeden dataType gesendet:

• xml „application/xml, text/xml“
• html „text/html“
• script „text/javascript, application/javascript“
• json „application/json, text/javascript“
• text „text/plain“
• Everything else: „*/*“

Fehlerbehebungen

Einige Funktionalitäten haben eine wichtige Überarbeitung erfahren.

Event API

Es gibt eine neue API für den Umgang mit Ereignissen. Es können eigene Ereignis-Typen erzeugt werden. Es ist möglich, über die einfache Ereignis-Steuerung hinaus zu gehen und ein komplettes Schema für das Hinzufügen, Behandeln und Abbrechen von Ereignissen auf einem Element zu erzeugen.

Hier kannst du die neuste Version herunterladen (minimale Version)

Hier findest du eine Einführung in jQuery

Im letzten Blogpost stellte ich das DHTML Tooltip Script vor. Ich wurde jedoch vor die Aufgabe gestellt, die Tooltip-Texte nicht mehr direkt in den Quelltext abzulegen, sodass sie von Suchmaschinen wie Google nicht ausgelesen werden können. Das bestehende Script wollte ich nicht anrühren, sondern ein eigenes Script (infobox.js) schreiben, welche die gewünschte Funktionalität realisiert.

Im Header der Seite müssen also folgende Dateien eingebunden werden:

<link rel="Stylesheet" type="text/css" href="tooltip.css" media="screen" />
<script language="javascript" type="text/javascript" src="toolTip.js"></script>
<script language="javascript" type="text/javascript" src="infobox.js"></script>

Die Elemente, auf die das Tooltip angewendet werden soll, müssen sich innerhalb eines Elementes mit der ID „boxes“ befinden. Jedes Element, das einen Tooltip anzeigen soll, wird mit genau dem Klassennamen versehen, welches das anzuzeigende Element als ID besitzt.

<div id="boxes">
<a class="t_0"><img class="png" src="qmbox.png" alt="Box1" /></a> <!-- gibt "Tooltip 1" aus -->
<a class="t_1"><img class="png" src="qmbox.png" alt="Box1" /></a> <!-- gibt "Tooltip 2" aus -->
</div>

Das Script infobox.js ist wie folgt aufgebaut:

codeToAdd = Array();
codeToAdd[0] = '<div class="tooltipsammlung">';
codeToAdd[1] = '<div class="tooltip" id="t_0"><b>Tooltip 1</b></div>';
codeToAdd[2] = '<div class="tooltip" id="t_1"><b>Tooltip 2</b></div>';
codeToAdd[7] = '</div>';

function bindTooltip() {
	document.getElementsByTagName("body")[0].innerHTML += codeToAdd.join('');

	path = document.getElementById("boxes").getElementsByTagName("a");

	for ( var i = 0; path[i] ; i++ ) {
		if ( path[i].className ) {
			path[i].onmouseover = function() { initTooltip(this.className); };
			path[i].onmouseout = function() { hideTooltip(); };
		}
	}
}

if ( window.addEventListener ) {
	addEventListener( "load", bindTooltip, false );
} else {
	attachEvent( "onload", bindTooltip );
}

Die Funktion bindTooltip() bindet zuerst das Array „codeToAdd“ (also die anzuzeigenden Tooltips) in den <body> der Seite ein. Danach werden alle <a> Elemente innerhalb von „boxes“ ermittelt. Den gefundenen Elementen werden die Javascript Funktionen initTooltip() und hideTooltip() zugewiesen.

Zur Demoseite

Hier die benötigten Dateien:

Hier gibt es die benötigten Dateien:

tooltip.css
infobox.js
toolTip.js

Für Tooltips über HTML Elementen nutze ich gern das DHTML Tooltip Script von Mikko Mensonen. Der Vorteil ist, dass sich innerhalb des Tooltip beliebiger HTML Code befinden darf. Das Script lässt sich außerdem sehr einfach einbinden und anwenden.

Zunächst eine kurze Einführung:

Man fügt zuerst das Script im Seitenheader ein, zusammen mit einem Stylesheet, welches das Tooltip und dessen Inhalt formatiert, sowie die Ausgabe der Tooltip Texte auf der Seite verhindert:

<script src="toolTip.js" language="javascript" type="text/javascript"></script>
<link href="tooltip.css" rel="Stylesheet" type="text/css" media="screen" />

tooltip.css sieht wie folgt aus:

.tooltip {
	position:absolute;
	display:none;
	border:1px #000000 solid;
	padding:5px;
	width:350px;
	z-index:2000;
}
.tooltipMouseover {
	position:absolute;
	display:block;
	border:1px #000000 solid;
	padding:5px;
	width:350px;
	z-index:2000;
	top: -100px;
	left: -500px;
}

Als nächstes werden die Tooltip Element innerhalb von <body> eingebunden:

<div class="tooltipsammlung">
<div class="tooltip" id="t_1"><b>Mein Tooltip</b><p>Dies ist mein Beispiel Tooltip</p></div>
</div>

Es werden Elemente definiert (in unserem Fall ein Bild), die beim onmouseover Event einen Tooltip anzeigen und beim onmouseout Event den Tooltip wieder ausblenden sollen:

<a onmouseout="hideTooltip();" onmouseover="initTooltip('t_1');"><img src="images/qmbox.png" height="128" width="128" /></a>

Zuletzt wird noch diese Zeile vor dem schließenden body-Tag </body> eingebunden:

<div id="tooltipMouseover" class="tooltipMouseover"></div>

Und schon funktioniert das Tooltip!

Hier gibt es die benötigten Dateien:

toolTip.js
tooltip.css

Screenshot:

Nach der Version 0.7 ließ ein Update nicht lange auf sich warten. In der aktuellen Version sind folgende Neuerungen enthalten:

• Kompatibilität für Safari 1.x
• unbedeutende Performance-Steigerung
• es wurden die Javascript-Ereignisse onclick und ondblclick für die Bilder hinzugefügt (der Link befindet sich direkt im longdesc Attribut des Image-Tag)
• verbesserte Bildskalierung, jetzt bleiben alle Bildformate im Haupt-div-Container „imageflow“

ImageFlow runterladen

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

Flot ist eine Javascript-Bibliothek zum Erstellen von ansprechenden Diagrammen auf einfache Weise. Das dänische Web-Studio Iola entwickelte flot als Plugin für das Ajax-Framework jQuery. Aktuell ist flot in der Version 0.3 verfügbar und wird auf einer Projektseite bei Google Code publiziert.Ich habe ein paar Beispiele erstellt, anhand derer ich die Funktionsweise und die Möglichkeiten von flot aufzeigen will.

Im html-Header müssen zuerst die Javascript-Dateien eingebunden werden. Das wäre zum einen die jQuery- und zum anderen die Flot-Bibliothek. Da Flot die erst mit HTML5 und bisher nur von Firefox unterstützte Canvas-Zeichenoberfläche verwendet, muss zusätzlich die Bibliothek angehangen werden, die Canvas für den Internet Explorer verfügbar macht.

<!--&#91;if IE&#93;><script type="text/javascript" src="excanvas.pack.js"></script><!&#91;endif&#93;-->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.flot.js"></script>

Anschließend kann man beginnen die Diagramme zu positionieren. Dies geschieht über das div-Element, in dem auch gleich die Ausmaße des Plots angegeben werden. Wichtig ist hierbei das id-Element zum eineindeutigen identifizieren des div.

<div id="dia1" style="width: 500px; height: 200px"></div>

Der „Zaubertrick“ zum einfachen Erstellen von Diagrammen geschieht in einer Javascript-Funktion. Zu aller erst legt man einen oder mehrere Datensätze fest (das können festgelegte Werte sein oder Datenpaare, die man mittels einer Schleife sich erzeugen lässt, sein). Im Anschluss ruft man über die plot-Methode des $-Operator die Funktion zum Erstellen des Diagramms auf und gibt dabei alle benötigen Variablen. Hier ein Beispielaufruf:

$(function () {
	var d1 = [[0, 6], [1, 2], [4, 5], [7, 8], [9, 10]];

	$.plot($("#dia2"), [
	{
		color: "rgb(0, 0, 255)",
		data: d1,
		bars: { show: true }
	}
	]);
});

Wie bereits beschrieben, legt man zuerst den Datensatz fest – im Beispiel d1. Ein Datensatz besteht aus einem Array mit beliebig vielen Elementen, wobei jedes Element ein zweidimensionales Array ist. Das erste Datenpaar lautet [0,6], d.h. für x = 0 ist y = 6.

Der Aufruf der $.plot-Methode erwartet bis zu 3 Parameter. Der erste Parameter enthält die id des div, in das der Plot geschrieben werden soll. Mit zweiten Parameter werden der Funktion sowohl die Daten als auch die Art der Darstellung übergeben. Dies geschieht ebenfalls in einem Array. Würde man also 2 Kurven in ein Diagrammm zeichen wollen, würde ein solcher Aufruf etwa die Form $.plot($(„#dia2“), [{data: d1, lines: { show: true }}, {data: d2, lines: { show: true }} ]); haben. Der dritte Parameter ist optional, also keine Pflicht. Über diesen ist es möglich, das Diagramm an die eigenen Bedürfnisse genauer anzupassen.

Folgende Möglichkeiten zur Darstellungen der Daten (2. Parameterteil) sind verfügbar:

• color – legt Farbe des Graphen fest
• data – die zu übergebenden Daten
• label – Bezeichnung / Titel des Graphen (z.B. in der Legende)
• lines – Darstellung der Daten als Linie
• bars – Darstellung der Daten als Balken
• points – Darstellung der Daten als Punkte
• shadowSize – Größe des vom Graphen erzeugten Schattens

Zum Formatieren der Legende wurden folgende Optionen implementiert (Auszug):

• show – erwartet true oder false, je nachdem ob die Legende zu sehen sein soll oder nicht
• noColumns – Anzahl der Legendenspalten
• position – erwartet als Parameter „ne“, „nw“, „se“ oder „sw“ um festzulegen in welcher Ecke die Legende stehen soll
• margin – Abstand der Legende vom Diagrammrand
• backgroundColor – definiert die Hintergrundfarbe
• backgroundOpacity: setzt den Transparenzwert (zwischen 0.0 und 1.0)

Es existieren noch unzählige weitere Möglichkeiten zum individuellen Anpassen des Diagramms wie zum Beispiel das Fixieren der Achsenausmaße oder das Festlegen eines Rastes. Wer mehr dazu erfahren will, sollte die Dokumentation lesen.

Verglichen mit der Google Chart API bietet Flot zwar weniger Diagrammarten, läuft dafür aber lokal statt stets über Google. Des weiteren finde ich die Chart API weitaus kryptischer und damit bei komplexeren Diagrammen schwerer handhabbar. Für welchen Art man sich letztlich entscheidet, steht jedem frei.

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 ];
}