Jetzt haben sich die Anons etwas geschicktes einfallen lassen: Ein DDoS Tool, das in JavaScript geschrieben wurde und auf öffentlichen Servern wie pastebin plaziert wird. Danach werden die Links zur Aktion verbreitet – Anonymous goes social media – und wer den Link anklickt nimmt automatisch an der Op teil. Vorteil für die Mitglieder des Netzwerks: Die Behörden können schlecht nachweisen, ob die Seite bewusst, oder unbewusst für die Teilnahme an einem DDoS Angriff aufgerufen wurde, weil die Requests auf das Ziel ohne eigenes zutun im Hintergrund aufgebaut werden. Im Zweifel könnte das die Handlungsmöglichkeiten der Behörden aushebeln. Egal was man nun auch von den Methoden des Anonymous Netzwerks hält, aber das ist schon recht geschickt.

Vielleicht ist diese neue Form der DDoS Attacke sogar geschickter als ein kompliziertes und nur auf eine Schwachstelle in MySQL zielendes ominöses Tool wie RefRef. Ich werde mir den Quellcode jedenfalls ansehen (aus Neugier) und schauen wie es gemacht ist. Vermutlich ist es allerdings ziemlich einfach, denn ein solches JavaScript zu schreiben ist weniger aufwändig, als häufig gedacht wird.

Aber zuerst eine kleines Beispiel, wie der HTML-Code dazu aussehen könnte:

<select name="auswahl" id="auswahl">
	<option value="">--Bitte wählen --</option>
	<option value="1">Eins</option>
	<option value="2">Eins</option>
	<option value="3">Eins</option>
	<option value="4">Eins</option>
	<option value="5">Eins</option>
	<option value="1000000">Einemiooooon!!!!</option>
</select>

Filtern:
<input type="text" size="12" value="" onkeyup="filterSelectField( 'auswahl', this.value )"/>

Die dazugehörige JavaScript-Funktion sieht dann so aus:

function filterSelectField( fieldid, s ) {
	var rex = new RegExp( '^' + s.replace( '\.', '\\.' ), "i" );
	$$('select#' + fieldid + ' option').each( function (ele) {
		if( ele.value != '' )
		{
			if( ele.innerHTML.search( rex ) == -1  )
				ele.hide();
			else
				ele.show();
		}
	} );
}

Die Funktionsweise ist schnell erklärt: Mittels einer RegEx wird die Bennenung des Werts der “option” durchsucht und bei einem Treffer angezeigt und bei keinem Treffer ausgeblendet. Einfacher und schneller geht’s nun wirklich nicht. :-)

Viel Spaß damit.

JavaScript ist alles andere als barrierefrei, denn die Braille Browser, die von blinden Menschen benutzt werden, beherrschen kein JavaScript. Aber: Wir können trotzdem GUIs mit AJAX und jede Menge Eyecandy programmieren und der shit läuft trotzdem auch ohne JavaScript. Im Grunde ist es sogar kein großer Aufwand und bekanntlich führen sogar mehrere Wege zum Ziel. Den Weg, den ich immer gehe, den möchte ich mal kurz vorstellen.

Vorweg: Nicht notwendig, aber hilfreich ist der Einsatz eines Template Systems, wie z.B. Smarty. Da ich Smarty aber ziemlich unhandlich finde, habe ich mir seinerzeit mal eine eigene Template-Klasse geschrieben, mir der ich gut zurecht komme.

Erstmal zum grundlegenden Prinzip: Ein AJAX Request wird in der Regel durch eine onclick Aktion oder über das href Attribut eines Links ausgelöst. Soll das Ganze auch ohne JavaScript noch funktionieren muss im href Attribut ein Link stehen, der die Aktion ohne Einsatz eines asynchronen Requests auslöst, im onclick steht der Aufruf des AJAX Requests und danach, ganz wichtig, “return false”.

Ein Beispiel für einen solchen Link:

<a href="index.php?action=show_entry&entry_id=23" onclick="ajax_request( 'action=show_entry&entry_id=23&ajax=true', 'contentdiv' ); return false;">Zeige Eintrag</a>

Ist JavaScript beim Klicken des Links nicht aktiv, wird der Link regulär aufgerufen, mit Hilfe von PHP entsprechend ausgewertet und das benötigte HTML erzeugt. Ist JavaScript aktiv, dann wird der AJAX Request gestartet und das reguläre Verfolgen des Links im href Attribut durch “return false” unterbunden. An PHP wird mittels Parameter “ajax=true” übermittelt, dass nicht das vollständige HTML zu erzeugen ist, sondern nur das was für den Inhaltsbereich benötigt wird.

Das klingt nun erstmal so, als wäre es sehr aufwändig, aber mit einem Template System ist es ein Kinderspiel. Ein wenig PHP Pseudocode dazu:

	// Auswahl des Templates
	if( empty( $_REQUEST[ 'ajax' ] ) )
	{
		$content = new template( 'templates/tpl_main.html' );

		$menu = new template( 'templates/tpl_menu.html' );
		$menu -> finish();

		$sidebar = new template( 'template/tpl_sidebar.html' );
		$sidebar -> finish();

		$content -> set( 'menu', $menu -> get_html() );
		$content -> set( 'sidebar', $sidebar -> get_html() );
	}
	else
	{
		$content = new template( 'templates/tpl_ajax.html' );
	}

	// Erzeugen und einsetzen des Inhalts der gewünschten Aktion
	if( $_REQUEST[ 'action' ] == 'show_entry' )
		$content -> set( 'content', show_entry( intval( $_REQUEST[ 'entry_id' ) ) );

	// Template rendern und ausgeben
	$content -> finish();
	echo $content -> get_html();

Im Prinzip ist es also ganz einfach: Ist der Parameter “ajax” leer, dann wird mittels des Template Systems die vollständige Seite zusammengebaut. Kommt der Request per AJAX, dann wird nur der benötigte Teil ausgegeben und mittels JavaScript in das entsprechende Div gesetzt. Im Prinzip also doch einfacher, als man vermutet.

Auch Formularübergaben können so sehr einfach sowohl per AJAX, als auch regulär abgesendet werden:

<form name="entryaddform" id="entryaddform" action="index.php" method="post">
<input type="hidden" name="action" id="entryaddform_action" value="entry_add"/>
<input type="hidden" name="ajax" id="entryaddform_ajax" value=""/>

<fieldset>
	<legend>Eintrag anlegen</legend>

	<div>
		<label for="entry_titel">Bezeichnung des Eintrag</label>
	</div>
	<div>
		<input type="text" name="entry_titel" id="entry_titel" size="40"/>
	</div>

</fieldset>

<input type="submit" value="Speichern" onclick="$('entryaddform_ajax').value = 'true'; ajax_form( 'entryaddform' ); return false;"/>

</form>

Auch hier ist es wieder sehr einfach: Genau wie beim Link, liegen auf der onclick Aktion des Submit Buttons die entsprechenden JavaScript Anweisungen, um das Hidden Field “ajax” mit einem Wert zu füllen, das Formular asynchron abszusenden und um schlussendlich das reguläre Senden des Formulars mit “return false” zu unterbinden. Ist JavaScript nicht aktiv, wird das Formular reguläre mit leerem Parameter “ajax” abgesendet.

Es ist also tatsächlich relativ einfach eine moderne Webanwendung barrierefrei zu gestalten.

Um TrueType/OpenType Schriften in eine Webseite zu integrieren, gibt es verschiedene Möglichkeiten. Einmal wäre da sIFR, was ich aber nicht verwenden wollte, da ich Flash eher mit Abneigung gegenüberstehe und es zudem Probleme mit AdBlockern geben kann. Die nächste Möglichkeit wäre gewesen, es mit CSS3 zu lösen, was aber ebenfalls ausschied, da dies von zu wenig Browsern unterstützt wird.

Nach ein wenig Recherche fand ich allerdings eine mir zusagende Lösung: typeface.js – ein kleines JavaScript, dass mittels SVG/VML die als TTF oder OTF gelieferte Schriftart im Browser verfügbar macht.

Der Einsatz ist relativ einfach: Auf der Webseite von typeface können beliebige Schriften (TTF/OTF) in JavaScript Dateien konvertiert werden, die zusammen mit der typeface.js im Header der Seite nach den eigenen CSS-Definitionen eingebunden werden.

Hier ein Beispiel:

<head>
	<title>Beispiel</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<link rel="stylesheet" href="style.css" media="screen"/>
	<script type="text/javascript" src="js/typeface-0.14.js"></script>
	<script type="text/javascript" src="js/rkm_headline_regular.typeface.js"></script>
	<script type="text/javascript" src="js/rkm_headline_bold.typeface.js"></script>
</head>

Anhand dieses HTML-Codes wird ein wichtiges Detail bereits deutlich: Jede Schriftvariante (Fett/Kursiv/…) muss gesondert in eine JavaScript Datei konvertiert werden, denn nur so ist es typeface möglich auch CSS-Angaben wie “font-weight: bold” richtig zu interpretieren. Fehlt die Fettschriftvariante der Schriftart, wird der Text nicht umgewandelt. Ein kleiner Stolperstein, aber wer es weiß, für den ist es kein Problem.

Ansonsten ist der weitere Einsatz von typeface einfach: Headline-Tags können per Stylesheet formatiert werden, bei anderen Tags muss eine Style-Angabe im Tag direkt gesetzt sein, Kind-Elemente werden nicht beachtet.

Beispieldefinition eines Headline-Tags:

#middle h2 {
	font-size:20px;
	font-weight:normal;
	text-transform:uppercase;
	letter-spacing:1px;
	margin-bottom:18px;
	font-family:'RKM Headline',Arial,Helvetica,sans-serif;
	font-weight:bold;
}

Der Tag wird erstmal wie gewöhnlich formatiert, so dass die Überschrift auch schön aussieht, wenn typeface nicht funktioniert. Dann wird per “font-family” einfach unsere selbst erzeugte Schriftart “RKM Headline” gesetzt, um den Rest kümmert sich das JavaScript.

Möchtest du ein anderes Element als eine Headline mit der Schriftart anzeigen, kann dies auch über das Style-Attribut des Tags gelöst werden:

	<a class="typeface-js" style="font-family: 'RKM Headline',Arial,Helvetica,sans-serif;">Dies ist ein schöner Link</a>
	<br/>
	<br/>
	<a class="extern_link typeface-js" style="font-family: 'RKM Headline',Arial,Helvetica,sans-serif;">Dies ist ein schöner externer Link</a>

Hier nur wichtig: Im Class-Attribut des Tags muss “typeface-js” vorkommen, der Rest läuft über das Style-Attribut, aber auch die CSS-Attribute – wie z.B. die Schriftgröße – die auf das Element wirken werden berücksichtigt.

Schon klasse muss ich sagen… und OpenSource noch dazu! Daumen hoch für typeface!

Hier ein wenig HTML:

Datenblatt 1
Datenblatt 2
Datenblatt 3
Datenblatt 4
Datenblatt 5

Jede Menge Daten (1)
Jede Menge Daten (2)
Jede Menge Daten (3)
Jede Menge Daten (4)
Jede Menge Daten (5)

Oben findet sich unser Tab-Menü, dass die insgesamt 5 Daten-Layer per Klick einblenden soll. Die DIVs mit den Daten sind per Style-Definition erstmal nicht sichtbar, bis auf den ersten DIV, da davon auszugehen ist, dass ohne einen Klick auf etwas das erste Datenblatt angezeigt werden soll. Damit das Tab-Menü auch ansprechend aussieht, brauchen wir noch folgende CSS Definitionen:

#tabmenu {
	overflow:hidden;
	border-bottom:1px solid #FFF;
}
#tabmenu .tab {
	float:left;
	border:1px solid #660000;
	border-bottom:none;
	margin-left:3px;
	padding:3px;
	background-color:#F4F4F4;
	font-weight:bold;
}
#tabmenu .active {
	background-color:#FFFFFF;
	color:#000099;
}
#tabmenu .tab:hover {
	background-color:#FFFFFF;
	cursor:pointer;
}

Damit wir nun nicht für jeden einzelnen Tab eine “onclick” Aktion schreiben müssen, habe ich mir überlegt ein auf Prototype aufsetzendes JavaScript zu schreiben, dass anhand der verwendeten IDs der Tabs und der Daten-DIVs (die nur zueinander passen müssen) eine generell einsetzbare Lösung schafft. Das Skript kann im Head-Bereich der Seite eingebunden werden und durchsucht beim Aufruf, ob Tabs vorhanden sind und behandelt diese entsprechend.

/**
 * Render a tabbed menu
 */
var tabids = [];
var containerids = [];
function create_tabs()
{
	$$('.tab').all( function( el ) {
			tabids.push( el.id );
			containerids.push( el.id.replace( 'tab_', '' ) );
			el.observe( 'click', handle_tab_click );
			return true;
	} );
}
/**
 * Hande a clicked tab
 */
function handle_tab_click( event )
{
	// Get container id
	containerid = this.id.replace( 'tab_', '' );
	// Set active tab menu point
	tabids.all( function( tab ) {
		$(tab).removeClassName( 'active' );
		return true;
	} );
	this.addClassName( 'active' );
	// Set active tab content container
	containerids.all( function( container ) {
		$(container).hide();
		return true;
	} );
	$(containerid).show();
}
/**
 * Init tabbing
 */
Event.observe( window, 'load', create_tabs );

Die erste Funktion “create_tabs” sucht alle DIV-Layer innerhalb der Seite, die mit der CSS-Klasse “tab” versehen sind. Die gefundenen Tabs werden danach zur weiteren Verarbeitung in einem Array gespeichert und mit einer String-Ersetzung der zugehörige Daten-Layer ermittelt. Die IDs der Datenlayer werden ebenfalls in einem Array gespeichert. Zu guter letzt wird dem Tab-Menüpunkt noch eine Handler-Funktion zugewiesen.

Die zweite Funktion ist diese Handler-Funktion. Beim Klick wird zuerst ermittelt, welcher Daten-Layer angezeigt werden soll, indem durch eine Zeichenersetzung das “tab_” in der ID des Tab-Menüpunkts entfernt wird. Übrig bleibt dann z.B. “datasheet1″, wenn der erste Menüpunkt ausgewählt wurde. So weiß die Funktion für den späteren Verlauf, welcher DIV angezeigt werden muss.

Nun geht es daran, das Tab-Menü entsprechend zu verändern, denn es soll ja der angeklickte Menüpunkt hervorgehoben werden. Dazu entfernen wir per Prototype-Methode “all”, die auf das bei der Initialisierung erstellte Array angewendet wird, bei allen Tabs die CSS Klasse “active”. Danach wir die Klasse “active” dann beim angeklickten Punkt gesetzt und das Menü ändert sich so entsprechend dem Nutzerverhalten.

Dann durchlaufen wir ebenfalls mit “all” das Array, das die IDs der Datenblätter enthält und verstecken mittels “hide” alle DIVs. Nun wird nur noch das richtige DIV eingeblendet und das Tabbing ist komplett.

Großes Finale im Skript ist dann noch ein Event-Observer, der nach dem Laden der Seite die Funktion “create_tabs” aufruft und so alle auf der Seite gefundenen Tabs initialisiert.

Wichtig für den Einsatz des Skripts ist nur folgendes: Die IDs der Tab-Menüpunkt und der Layer mit den Daten müssen auf einander abgestimmt sein und ein Tab-Menüpunkt muss immer mit “tab_” beginnen. Lege ich also einen Tab mit der ID “tab_datentabelle123″ an, dann muss das DIV mit den Daten die ID “datentabelle123″ haben, sonst funktioniert es nicht. Natürlich müssen die Tab-Menüpunkte auch die richtigen CSS-Klassen haben, aber das versteht sich wohl von selbst.

Und so könnte es aussehen:

Weil mir gestern Abend langweilig war, habe ich mich damit beschäftigt den Parallax Effekt versuchsweise in JavaScript umzusetzen. Als Bibliotheken verwende ich dabei PrototypeJS und Scriptaculous. Nachdem ich mit einem Grafikprogramm meine 3 Layer gezeichnet und PNGs mit Transparenz exportiert hatte, ging es an die Umsetzung. Schnell wurde mir klar, wie simpel es im Grunde ist mit ein wenig CSS und JavaScript diesen Effekt zu erzeugen.

Das HTML Grundgerüst besteht lediglich aus 3 DIV Layern:

<div id="layer_bg">
	<div id="layer2">
		<div id="layer1">
		</div>
	</div>
</div>

Auf diese DIVs werden ein paar einfache CSS Regeln angewendet, um die Hintergrundgrafiken zu setzen. Zudem wird noch die Breite und Höhe definiert und der “overflow” auf “hidden” gesetzt. So wird es möglich per CSS Anweisung “background-position” den Hintergrund, also unseren Parallax-Layer, zu verschieben und einen Scroll-Effekt zu realisieren.

#layer_bg {
	border:10px solid #FFF;
	width:1150px;
	height:400px;
	margin:auto auto;
	background-image:url( 'layer_bg.png' );
	background-repeat:repeat-x;
	background-position:0px 0px;
	overflow:hidden;
}
#layer1 {
	background-image:url( 'layer1.png' );
	background-repeat:repeat-x;
	background-position:0px 0px;
	width:1150px;
	height:400px;
	overflow:hidden;
}
#layer2 {
	background-image:url( 'layer2.png' );
	background-repeat:repeat-x;
	background-position:0px 0px;
	width:1150px;
	height:400px;
	overflow:hidden;
}

Die Bewegung der Hintergrundgrafiken übernimmt eine kleine JavaScript-Funktion, an welche die Art der Bewegung übergeben wird.

var position_index1 = 0;
var position_index2 = 0;
var position_index3 = 0;
var effect_running = false;
function run_effect( $move_type )
{
	if( !effect_running )
	{
		effect_running = true;
		if( $move_type == 'move_left' )
		{
			position_index3 += 200;
			position_index2 += 200;
			position_index1 += 200;
		}
		if( $move_type == 'move_right' )
		{
			position_index1 -= 200;
			position_index2 -= 200;
			position_index3 -= 200;
		}
		if( $move_type == 'rotate_left' )
		{
			position_index3 += 200;
			position_index2 += 50;
			position_index1 -= 200;
		}
		if( $move_type == 'rotate_right' )
		{
			position_index3 -= 200;
			position_index2 -= 50;
			position_index1 += 200;
		}
		new Effect.Morph( 'layer_bg', { style:'background-position:' + (position_index3 * 1) + 'px 0px;' } );
		new Effect.Morph( 'layer2', { style:'background-position:' + (position_index2 * 2) + 'px 0px;' } );
		new Effect.Morph( 'layer1', { style:'background-position:' + (position_index1 * 3) + 'px 0px;', afterFinish:function() { effect_running = false; } } );
	}
}

Bei Eintritt in die Funktion wir zuerst geprüft, ob eine Bewegung nicht bereits läuft, falls das nicht der Fall ist, werden für die unterschiedlichen Bewegungs-Arten die neuen Werte für die Hintergrund-Position des Hintergrundbildes berechnet und anschließend mit dem Effekt “Morph” gesetzt. Je näher der Layer an der “Kamera” ist, um so mehr (schneller) wird er bewegt, wodurch dem Betrachter eine dritte Dimension vorgegaukelt wird.

Wer das vollendete Versuchsobjekt betrachten möchte, der kann das nun gerne tun und noch einen Blick in den Quellcode der Seite werfen. Ich habe den Code noch um einige Kleinigkeiten erweitert, z.B. um die Steuerung per Pfeiltasten.

Natürlich ist das mal wieder sinnloses eyecandy, denkbar wäre aber, ein schickes Menü damit zu realisieren.

	// Entweder so
	document.write( '<a h'+'ref="ma'+'ilto'+':post'+'@'+'thegeek'+'.'+'de">post'+'@'+'thegeek'+'.'+'de</a>' );

	// Oder auch so [prototype]
	$('my_mail_adress').update( '<a h'+'ref="ma'+'ilto'+':post'+'@'+'thegeek'+'.'+'de">post'+'@'+'thegeek'+'.'+'de</a>' );

Wichtig ist noch folgendes:

	<noscript>
		post AT thegeek . de
	</noscript>

Sollte JavaScript nicht verfügbar sein, wird einfach die E-Mail Adresse ohne “@”-Zeichen und Domain ausgegeben, was die Spam-Robots nicht dekodieren können.

Siehe hier (mit Protype umgesetzt, da document.write bei asynchron geladenem Content nicht sinnvoll ist):

PS: Die Mail-Adresse existiert nicht und wurde wirklich dynamisch mit JavaScript eingefügt. :-)

Zuerst habe ich meinen Body-Tag mit einer ID versehen, damit ich mit Prototype einfach auf das Body-Element zugreifen kann.

	<body id="body">

Dann habe ich ein kleines DIV samt Bild mit den CSS Eigenschaften “position:absolute” und “display:none” hinzugefügt. Das DIV kann mit Prototype so nämlich frei positioniert werden, wird aber vorerst nicht angezeigt.

	<!-- Create hidden bouncing ball layer (ajax-loading.gif or similar) -->
	<div id="bouncer" style="position:absolute;display:none"><img src="/images/ball.gif" alt=""/></div>

Als nächstes wird ein Event-Handler an den Event “onmousemove” des Body-Tags geklebt. Der Handler ermittelt die aktuellen Maus-Koordinaten und platziert das (noch immer versteckte) DIV versetzt neben der Maus.

	// Move the bouncing ball next to mouse cursor position
	$('body').onmousemove = function( e ) {
		mouseX = Event.pointerX( e );
		mouseY = Event.pointerY( e );
		$('bouncer').setStyle( { left: (mouseX+15) + 'px', top: (mouseY+15) + 'px' } );
     		return true;
	}

Danach habe ich meine AJAX-Load Funktion noch so abgeändert, dass mit Beginn des Requests das DIV mit der Grafik angezeigt wird und bei Erfolg oder Fehler wieder versteckt wird. Anbei eine kleine Beispiel-Funktion.

	// Example function to use the bouncer
	function ajax_load( uri )
	{
		$('bouncer').show();
		new Ajax.Request( uri, {
					onSuccess: function( r ) {
						$('bouncer').hide();
					},
					onFailure: function( r ) {
						$('bouncer').hide();
					}
		});
	}

Wirklich einfach, aber ein toller und ausnahmsweise auch mal sinnvoller Effekt. ;-)

Vorteil der Lösung: Wenn ein Fehler auftritt, oder im Browser kein JavaScript aktiviert ist, dann funktioniert die Seite ganz normal, was nebenbei auch sehr Suchmaschinen freundlich ist.

Die erste Funktion “fixLinks” die ich nutze, hat den Zweck an alle Links, die nicht bestimmten Kriterien entsprechen – z.B. Links auf Bilder, externe Links oder aber Links in WordPress Backend – eine “onclick” Aktion anzufügen. Die neue “onclick” Aktion des Links ruft dann die zweite Funktion “get_page” auf, welche die Seite läd und mit einem netten Effekt dann anzeigt.

function fixLinks()
{
	var myLinks = document.links;
	var myBrowserType = (window.attachEvent ? 1 : (window.addEventListener ? 2 : 0));
	var myDomain = 'thegeek.de';
	for( var i = 0; i < myLinks.length; i++ )
	{
		// Get the href
		myHref = myLinks[i].href.toString();
		// Get the onclick action
		myOnClick = myLinks[i].onclick ? myLinks[i].onclick : '';
		// Only attack onclick action, if not jscript links, images, wp-admin features and internal link
		if( 	myOnClick == ''
			&& myHref.indexOf( "#" ) != (myHref.length - 1)
			&& myHref.indexOf( "javascript:" ) == -1
			&& myHref.indexOf( "wp-admin" ) == -1
			&& myHref.indexOf( "#respond" ) == -1
			&& myHref.indexOf( "/trackback" ) == -1
			&& myHref.indexOf( "/feed" ) == -1
			&& myHref.indexOf( "/wp-login" ) == -1
			&& myHref.indexOf( ".jpg" ) == -1
			&& myHref.indexOf( ".gif" ) == -1
			&& myHref.indexOf( ".png" ) == -1
			&& myHref.indexOf( myDomain) != -1
		)
		{
			switch( myBrowserType )
			{
				case 1:
					Event.observe( myLinks[i], 'click', function( e ) { if( !get_page( this.href ) ) e.stop(); } );
					break;
				case 2:
					myLinks[i].setAttribute( "onclick", "return get_page( this.href );" );
					break;
				default:
					// Do nothing
			}
		}
	}
}
// body onload="fixLinks()" und die Sache läuft. :-)

Die zweite Funktion bewegt zuerst den Inhalt an die beim Init ermittelt Position außerhalb des Bildschirms und läd dann per asynchronem HTTP Request die neue Seite. Der Inhalt der Seite ist im Theme mit einem HTML Kommentar gekennzeichnet und wird mittels Regular Expression ermittelt, dann in den Layer eingefügt, um die Seite danach wieder an die ursprüngliche Position zu bewegen. Keine Ahnung, ob's im IE klappt, ist mir allerdings auch ziemlich egal. :-)

Sollte etwas schief gehen, dann gibt die Funktion "true" zurück, womit der Klick auf den Link ganz normal ausgewertet wird. Hat alles geklappt, liefert die Funktion "false" zurück und der Browser folgt dem angeklicktem Link dann nicht. So ist auf jeden Fall gewährleistet, dass die neue Seite angezeigt wird - auf die synchrone oder asynchrone Art.

	var	c_w = $('content').getWidth();
	var	c_x = $('content').viewportOffset()[0];
	var	c_leave = (c_x + c_w) * -1;
	var	c_come = c_leave * -1;
	var	c_search = /()((?:.|[\r\n])*?)()/mgi;
	var	get_page_return_code = false;
	var	effect_running = false;
	function get_page( uri )
	{
		get_page_return_code = false;
		if( effect_running == false )
		{
			effect_running = true;
			new Effect.Move( 'content', { x: c_leave, y: 0, mode: 'relative', duration:0.5,
				afterFinish:function() {
					new Ajax.Request(	uri, {
									method:'get',
									onSuccess: function( r ) {
											$('content').update( '' );
											SearchResult = c_search.exec( r.responseText );
											while( SearchResult != null )
											{
												if( SearchResult[ 2 ] )
													$('content').update( SearchResult[ 2 ] );
												SearchResult = c_search.exec( r.responseText );
											}
											new Effect.Move( 'content', { x: c_come, y: 0, mode: 'relative', duration:0.5, afterFinish:function () {effect_running = false;} } );
											fixLinks();
									},
									onFailure: function( r ) {
										get_page_return_code = true;
										effect_running = false;
									}
					});
				}
			});
		}
		return get_page_return_code;
	}

Klar handelt es sich hier um ziemliches sinnfreies Eyecandy. Ich mag Eyecandy.