Ajaxschmiede.de

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.

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>

In diesem Video von Google Tech Talks sprechen Waldemar Horwat und Pascal-Louis Perez über anstehende Änderungen an der Javascript Sprache. Das Video ist in Englisch und geht knapp eine Stunde.

Hier eine kurze Zusammenfassung des Videos:

Nach 8 Jahren Arbeit im Standards-Komitee wird Javascript bald ein Update bekommen. Wir präsentieren die Höhepunkte und Begründungen der vorgeschlagenen Änderungen an Javascript.

Die vierte Auflage der ECMAScript (Javascript) Sprache repräsentiert eine signifikante Entwicklung der dritten Auflage, welche 1999 standardisiert wurde. ES4 ist kompatibel mit ES3 und fügt wichtige Hilfen für eine umfangreiche Programmierung hinzu (Klassen, Interfaces, Namensräume, Pakete, Programm-Bausteine, optionale Typ-Kommentare und optional statische Typenkontrolle und Verifikation), evolutionäres Programmieren, konstruieren von Datenstrukturen, Steuerungsabstraktion (ordnungsgemäße Aufrufe, Iteratoren und Generatoren) und Selbstprüfung. Eine verbesserte Unterstützung für reguläre Ausdrücke und Unicode, reichhaltigere Bibliotheken und ordnungsgemäße Gültigkeit von Blockkonstanten wurden ebenso hinzugefügt.