Gut - den eingefleischten SEOs hier erzähle ich wohl nichts Neues mehr. Aber ich habe gerade durch Zufall festgestellt, dass die Google-Bots beim Indizieren von Websites manchmal wohl auch JavaScript-Code ausführen.
Beim Lesen eines Artikels auf ha.ckers.org bezüglich verschiedener Antispam-Schreibweisen von Mailadressen kam mir der Gedanke, doch mal die Standardverschlüsselung von Mailadressen von TYPO3 zu überprüfen. Statt der verlinkten Adresse in Klartext steht dort nur ein JavaScript, welches ausgeführt den eigentlichen Adresslink auftauchen lässt.
Folglich habe ich daraufhin mal eine bestimmte Adresse, von der ich wusste, dass sie im Impressum einer mir bekannten Seite steht, mit Google gesucht. Und siehe da: bereits auf der ersten Seite der SERPs finde ich besagtes Impressum. Schlimmer noch: im Beschreibungstext zum Link wird auch noch genau diese Mailadresse im Klartext ausgegeben.
Neugierig geworden musste ich gleich noch eine Adresse ausprobieren. Für Seiten, die ich damals nicht mit TYPO3 erstellt hatte, habe ich immer den Linkencoder vom Antispam e. V. benutzt, um Mailadressen zu verschlüsseln. Hier allerdings stelle ich fest: den Code führt Google offensichtlich nicht aus. Die Testadressen konnte ich nicht finden. Schön. Dann benutzen wir in Zukunft halt den. Erst einmal. Ich sollte das Thema mal im Auge behalten...
Update:
Ein paar Stunden später hatte ich den ersten Kommentar hierzu. Dabei habe ich festgestellt, dass ich Quatsch geschrieben habe. Unfassbar, aber der Anker-/Linktext steht unkodiert im Quelltext. Und die Adresse, die ich exemplarisch getestet hatte, wird sogar gar nicht verschlüsselt. Komisch. Die Seite habe ich selbst eingerichtet, und normalerweise ist die Antispam-Geschichte mit das Erste, was ich bei TYPO3 anschalte.
Das wird wohl einer meiner unterbelichteten Nachfolger der Optik wegen (anders kann ichs mir nicht erklären) wieder abgeschaltet haben.
Wie es scheint, führt der Googlebot doch keinen JS-Code aus. Zumindest nicht so. Ich nehme erstmal alles zurück und behaupte das Gegenteil :-)
Dienstag, 8. September 2009
Google-Bot führt JavaScript aus
Dienstag, 5. August 2008
Mit AJAX einfach Inhalte nachladen, Ladegrafik anzeigen
Ich hab mir bei meinen letzten AJAX-Artikeln (hier und hier)sprichwörtlich "einen Wolf geschrieben"; dabei könnte man sich auch viel kürzer fassen. Also mal ein ganz kurzes Beispiel: wir wollen von einer anderen Seite oder einem Script Inhalte auslesen und den Content dann in ein DIV schreiben.
Zunächst einmal der (gekürzte) HTML-Code (den Rest bitte ergänzen):
<body>
<div id="inhaltscontainer">alter Inhalt</div>
<p>
<a href="#" title="laden" id="testlink"
onclick="getContent('foo.html');return false;">test</a>
</p>
</body>
Das ist nun der Inhaltscontainer. Hier möchten wir nun den Inhalt austauschen gegen das, was wir per AJAX woanders auslesen. Eine sehr einfache Variante erreicht man mit jQuery. Zunächst muss man also das jQuery-Framework im Head-Bereich einbinden. Anschließend kann man dessen Funktionalitäten nutzen und ein Script wie so eines schreiben:
function getContent(url){
$('#inhaltscontainer').html('<div class="ajaxloader">
<img src="img/ajax-loader.gif" width="32" height="32" alt="Lade">
<br />Lade Inhalt</div>');
//$('#inhaltscontainer').load(url + " #content");
$('#inhaltscontainer').load(url);
};Wir ersetzen in der ersten Zeile mit der html()-Funktion den Inhalt des Elements mit der Id 'inhaltscontainer' mit einer Ladegrafik. Jetzt können wir beruhigt die Inhalte nachladen, ohne dass sich der Besucher wundert, was sich da tut. Der eigentliche Austausch der Inhalte ist dagegen schon unspektakulär und wird über die Funktion load() erledigt. Die letzte Zeile im Detail: wir sprechen über das Element "inhaltscontainer" die Funktion load() an. Dieser geben wir die zu ladende Adresse mit. Optional (siehe auskommentierte Zeile) ist es auch möglich, nur ein bestimmtes Element aus der Zielseite zu extrahieren und das dann in den Inhaltscontainer zu laden (bitte auf das Leerzeichen vor dem Quellcontainernamen achten).
PS: achtet bitte beim Copy&Paste des Beispielcodes darauf, dass hier möglicherweise ein paar Zeilenumbrüche zu viel drin sind, da das hier sonst nicht reinpasst. Die müssen beim Ausprobieren wieder korrigiert werden.
Donnerstag, 31. Juli 2008
AJAX Div Container einzeln laden oder mehrere Divs updaten
Wenn man mal schnell mit AJAX einen neuen Inhalt in einen Div-Container laden will, dann kann man das am einfachsten lösen, indem man jQuery einbindet und davon dann die load()-Funktion verwendet. Ein Beispiel aus der Doku:
Code:
$("#feeds").load("feeds.html");Erläuterung: es wird der Inhalt der Adresse "feeds.html" in den Div-Container mit der ID "#feeds" reingeladen.
Code:
$("#feeds").load("feeds.html #feedlist");Eine kleine Erweiterung. Hier wird nur der Container "#feedlist" von "feeds.html" in "#feeds" geschrieben. Man muss also nicht die ganze Seite laden, sondern kann gezielt eine Auswahl treffen.
Logischerweise empfiehlt sich dies nur, wenn man auch wirklich nur den einen Container updaten will. Wenn man mehrere Div-Container gleichzeitig neu laden will, dann sollte man sich irgendwie anders behelfen, um nicht zu viele Requests an den Server schicken zu müssen. Ein Beispiel:
Heute gerade hatte ich wieder das Script, was ich schonmal hier vorgestellt hatte, auf dem Tisch liegen, da das noch nicht beim Kunden auf der Webseite eingebaut war. Dort handelte es sich um eine TYPO3-Seite mit einer Thumbnailliste und zwei Contentbereichen. Die Thumbnails sollten stehen bleiben, aber die Contentbereiche sollten sich beim Klick auf die Thumbnails ändern.
Leider waren die Contentcontainer nicht so angeordnet, dass man sie in einem Zug hätte ersetzen können. Ich wollte es aber auch vermeiden, dass für jeden Container ein separater Request abgesetzt wird. In diesem Fall habe ich unter TYPO3 einen neuen Seitentyp (typeNum=11) erstellt, der nur den HTML-Code der beiden zu ändernden Container enthält. Selbstverständlich mit einem Trenner dazwischen, damit ich das hinterher wieder aufspalten konnte So habe ich einfach mit der jQuery-Funktion get() den neuen Inhalt in eine Variable geladen und per split() in ein Array umgewandelt. Das erste Arrayfeld enthielt nun den Wert für den ersten Container, das zweite für den Zweiten. Natürlich könnte man das quasi unendlich weiter ausdehnen. Über die jQuery-Funktion html(val) konnte ich nun die Inhalte in die Container schreiben.
So habe ich das in TYPO3 gelöst. Die Programmierung eines neuen Seitentyps war ja zum Glück schnell gemacht (5min). Meist hat man diese Möglichkeit aber nicht. Da muss man dann tricksen, um das mit mehreren Containern hinzubekommen, ohne für jeden Div-Container einen eigenen Request abzusetzen. Eine Lösung wäre beispielsweise, dass man die ganze Seite oder einen (alles umfassenden) Container daraus über die load()-Funktion in ein unsichtbares Div reinlädt und daraus dann über eine geschickte Anwendung der Selektoren und der jQuery html()-Funktionen die Inhalte aus dem temporären Div extrahiert und in die Zielcontainer schreibt. Hinterher sollte man den temporären Container allerdings besser wieder leeren. Und immer daran denken, die Selektoren genau genug zu verfassen. Die doppelte Vergabe von IDs, wie sie bei dieser Methode schon einmal vorkommen kann, kann dann schnell zu unerwünschten Ergebnissen führen:
Schlecht:
Code:
$("#content").html( $('#tempcontainer #content').html() );Besser:
Code:
$("#bodywrap #content").html( $('#tempcontainer #content').html() );
// wobei #bodywrap der Hauptcontainer der Seite ist
// und #tempcontainer der Temporäre
Dienstag, 22. Juli 2008
JavaScript Text ausblenden / Fade out
Wenn einem die eigene Webseite etwas zu langweilig wird, kann man Effekte hinzufügen. Sehr beliebt ist beispielsweise das Fade-in bzw Fade-out von Text und Containern. Die gängigen JavaScript-Frameworks wie beispielsweise die MooTools oder jQuery bieten hierfür bereits die vorgefertigte Funktionen an. Man muss nur herausfinden, wie man diese Effekte programmiert bzw. verwendet. Die einfachste Lösung ist natürlich, sich erstmal die Demoseiten der Frameworks anzusehen. Dort kann man die einzelnen Funktionsweisen der Effekte direkt am Beispiel erleben und den funktionierenden Quelltext analysieren, um dann ein eigenes Script zu programmieren.
Vor Kurzem hatte ich das Vergnügen, zwei unterschiedliche Seiten zu "pimpen". Bei der einen sollte eine Art Pressespiegel in Jahre aufgeteilt werden, so dass nur noch die Jahreszahlen auftauchen und bei einem Klick auf die Jahre die jeweilige Übersicht schön aufklappt. Diesen Effekt erreicht man am einfachsten über die MooTools mit Fx.Slide. Ich spare mir an dieser Stelle mal ein Beispiel und verlinke einfach mal die Demoseite für Fx.Slide.
Die zweite Variante ist ein sanftes Einfaden bzw Ausfaden eines Textes oder eines Containers. Dies lässt sich ziemlich einfach mit jQuery programmieren. Die gesuchten Funktionen lauten hier "fadeIn()" und "fadeOut()". Btw: auch jQuery bietet Sliding ("slideUp()", "slideDown()", "slideToggle()").
Sehr interessant in diesem Zusammenhang ist natürlich das sog. Chaining. Man kann Effekte oder Funktionsaufrufe allgemein auch nacheinander ausführen. Die Ansatzweise der MooTools ist hier etwas anders als bei jQuery. Bei den MooTools wird hier an die erste Funktion jeweils ein .chain(nächsteFunktion) angehängt. Bei jQuery gibt es hierfür die sog. Callback-Funktionen, die bei Beendigung der laufenden Funktion aufgerufen werden. Im Grunde also das Gleiche - nur die Schreibweise ist anders.
Donnerstag, 17. Juli 2008
Bug im IE bei der Interpretation der innerHTML-Eigenschaft
Ich habe gestern ein Formular programmiert, welches sich basierend auf den Eingaben dynamisch aufbaut. Dafür habe ich in einem JavaScript die Formularfelder (Select-Boxen) über die innerHTML-Eigenschaft gefüllt. Das funktionierte auch wunderbar im Firefox, wo ich das programmiert hatte. Ich dachte, ich wäre fertig, und habe das dann noch einmal im Internet-Explorer getestet. Dort da der Schock: da läuft das nicht.
Offensichtlich handelt es sich dabei um einen Bug des Internet Explorers bei der Verarbeitung von <select> und <option>. Der Bug ist aber eigentlich ein uralter Hut, wie ein Blick in einen entsprechenden Support-Artikel auf microsoft.com beweist. Umso interessanter, dass ich den immer noch habe.
Die Lösung ist aber einfach. Statt das innerHTML auf das Select-Feld anzuwenden, muss man noch einen Div-Container darumlegen und das Select-Element jeweils komplett da reinschreiben:
Code:
var newcode = '<select name="test">
<option value="1">1</option>
<option value="2">2</option>
</select>';
document.getElementById("divcontainer").innerHTML = newcode;
Dienstag, 8. Juli 2008
rgmoodalbox Probleme im IE
rgmoodalbox ist eine Extension von Georg Ringer, die die Moodalbox in TYPO3 integriert. Leider ist die Dokumentation zu dieser Erweiterung unter Umständen etwas fehlerhaft. So kann es durchaus schon einmal vorkommen, dass eine nach dem Manual korrekt eingerichtete Extension in verschiedenen Browsern - allen voran IE6 und IE7 - nicht funktioniert. Das beste Beispiel dafür ist wohl die Beispielseite von Georg Ringer. Auf der Seite sollen die Langfassungen der tt_news-Beiträge dargestellt werden. Das funktioniert auch ganz gut. Nur halt im IE nicht. Zumindest zum jetzigen Zeitpunkt (08. Juli 2008, kurz vor'm Gewitter). Der IE öffnet die Fallback-Links ganz normal, aber keine Moodalbox.
Leider ließ sich der Herstellerseite keine Lösung entlocken. So musste ich bei Google tief buddeln, bis ich auf einer Google-Cache-Seite des Mootools-Forums (wie gesagt: tief gebuddelt) auf eine alternative Schreibweise zum Anlegen eines OnClick-Handlers über die Mootools gestoßen, die im Grunde das macht, was im rgmoodalbox-Manual steht, aber kompatibler ist:
window.addEvent('domready', function(){
var list = $$('dl.csc-textpic-image dt a');
list.each(function(element) {
var url = element.getProperty('href');
url = str_replace(".0.html",".44.html",url);
element.addEvent("click", function(e){
new Event(e).stop();
moobox(url);
});
});
return false;
});Der Codeschnippsel liest, sobald das DOM bereit ist, zunächst alle Anker (Links) einer bestimmten Klasse ein und durchläuft sie dann alle in einer Schleife. In dieser Schleife wird zunächst einmal die URL umgeschrieben. Das war in meinem Fall nötig, da ich die Zielseiten mit einem anderen Type-Parameter aufrufen wollte (anderes Layout als normal). Die Funktion str_replace kann man nachgoogeln. Anschließend kommt die Änderung gegenüber der Anleitung zu rgmoodalbox. Hier fügen wir per addEvent einen Click-Eventhandler dem Link hinzu. Dieser besteht aus einer Funktion, die zunächst das Event stoppt (entspricht einem return false) und anschließend die Moodalbox über die Funktion moobox() öffnet. Fertig.Wichtig ist übrigens auch noch der richtige Doctype. Dieser sollte XHTML sein, da man sonst Probleme mit den Mootools bekommt. Dies wird gern falsch gemacht. Beim Heraustüfteln der Lösung zu diesem Problem mit einer statischen HTML-Datei habe ich noch die Erfahrung gemacht, dass es unter Umständen auch von Vorteil ist, den Doctype und den XML-Prolog etwas anzupassen, um das Ganze dem IE besser verträglich zu machen. In TYPO3 habe ich das über
page.config.doctype = xhtml_strict
page.config.xmlprologue = none
erreicht. Das ist aber nur eine optionale Empfehlung, falls es zu unerwarteten Problemem kommen sollte.
Dienstag, 3. Juni 2008
Eleganter Seitenübergang-Effekt mit AJAX
Hier nun die inoffizielle Fortsetzung zu "Mit AJAX HTML nachladen"Kürzlich hatte ich die Aufgabe, eine Seite etwas zu pimpen, wie man so schön sagt. Es war so ein typischer Fall von Galerie zum Durchklicken. Die Kundin wollte da etwas mehr Pep drin haben. Gut - meine JavaScript-Kenntnisse sind nicht die Besten, die Bezahlung dafür aber auch nicht, also hatte ich eine gute Ausrede für einen einfachen Effekt. Ich hatte also in etwa folgende Struktur:
<div id="ajaxreplace">
<div id="bodywrap">
<div id="content">Lorem ipsum laberrhabarber</div>
<div id="pfeile">
<a href="0.html"><img="img/links.gif" border="0"/></a>
<a href="2.html"><img="img/rechts.gif" border="0"/></a>
</div>
</div>
</div>
Die Inhalte sollen ausblenden (herausfaden, fadeOut), neu geladen und wieder eingeblendet (hereingefadet, fadeIn) werden. Das ließ sich recht einfach mit jQuery lösen:
function ajaxfx(url){
$('#loading').css('background','url(img/ajax-loader.gif) no-repeat center center;');
$('#ajaxreplace').fadeOut(1000, function(){
// callback fadeOut()
$(this).load(url +' #bodywrap', function(){
// callback load()
$(this).fadeIn(1000, function(){
// callback fadeIn()
renewlinks();
$('#loading').css('background','none');
//return false;
});
});
});
};
function renewlinks(){
$("#pfeile a").unbind();
bindlinks();
}
function bindlinks(){
$("#pfeile a").unbind();
$("#pfeile a").one("click", function(e){
var link = $(this).attr("href");
ajaxfx(link);
return false;
});
}
$(document).ready(function(){
bindlinks();
});
Klar soweit?Also: ich habe Pfeilgrafiken zum Durchblättern der Galerie (#pfeile). Auf deren Links wird per one() (Alternativ: bind() )eine Funktion aufgesteckt, die als Parameter das Linkziel - man muss ja wissen, was da zu laden ist - bekommt. Ein Klick auf die Pfeile ruft also die Funktion "ajaxfx(url)" auf. Diese lässt zunächst in einem Element mit der ID "loading" eine als CSS-Hintergrund eingebundene Ladegrafik anzeigen (standardmäßig hat #loading keinen Hintergrund).
Das HTML-Gerüst besteht aus einem Container mit der ID "ajaxreplace". Alles, was darin ist, wird ersetzt. Wir faden also nun als nächstes den Container #ajaxreplace über die fadeOut()-Funktion aus. Als Callbackfunktion geben wir fadeOut() eine neue Funktion mit. Diese steht da jetzt inline. Über die load()-Funktion holen wir nun per AJAX einen Container mit der ID "bodywrap" von der Seite, die mit der Pfeilgrafik verlinkt war (url wurde ja als Parameter übergeben). #bodywrap ist der große Container, der nur noch von #ajaxreplace umschlossen wird.
Jetzt können wir in der Callback-Funktion von load() weitermachen und #ajaxreplace wieder einblenden. Anschließend löschen wir auch die Ladegrafik.
Das war alles.
Falls sich jetzt jemand wundert, was ich da mit den Pfeilen bzw. den Funktionen renewlinks() und bindlinks() angestellt habe: das hat sich beim Programmieren so ergeben. Die Pfeilgrafiken sind bei mir auch in #ajaxreplace bzw. dort in #bodywrap enthalten. Wenn ich die neu lade, dann muss ich die wieder neu initialisieren. Sonst kam es beim Testen schon einmal vor, dass der Übergangseffekt nur beim ersten Mal funktionierte. Beim nächsten Klick wurde die komplette Seite geladen, und dann funktionierte es wieder einmal. Also abwechselnd.
Die oben präsentierte Lösung funktionierte im realen Fall jedenfalls. Falls Ihr Verbesserungsvorschläge oder Fehlermeldungen habt, dann hinterlasst bitte einen Kommentar.
Dienstag, 20. Mai 2008
sIFR Schriftgröße einstellen
Die Schriftgröße kann man per CSS anpassen. Es zählt hier allerdings nicht der Wert "font-size", sondern "line-height".
Sonntag, 13. April 2008
Mit AJAX HTML nachladen
Vorgeschichte
Wer das Vorgeplänkel überspringen will, klickt hier.Ein Kunde von mir war noch nicht 100%ig zufrieden. Da das normal nicht sein kann, fragte ich nach, was ihn denn so stört. Das wiederum ist ein schönes Beispiel für diesen Beitrag. Also: Er (Kunde) hat auf seiner Webseite eine Art Galerie eingearbeitet. Standardprogramm: ein großes Bild und eine Reihe kleiner Thumbnails daneben. Die Box mit den Thumbs ist mit einem "overflow:hidden" ausgestattet und per JavaScript scrollbar. Das Problem ist nun, dass bei einem Klick auf einen Thumbnail die Seite mit dem gewünschten Bild komplett neu geladen wird. Die Scrollposition in der Thumbnailbox ist dadurch natürlich weg. Man muss sich also wieder mühsam zum nächsten Bild weiterscrollen. Gut, an sich ist das ja kein Problem, denn das war eine Änderung am Code, die vorher nicht abgesprochen war. Kann man also zusätzlich berechnen. Wie auch immer: Was tun? Das ursächliche Problem ist ja, dass die Seite beim Mausklick neu geladen wird. Dann muss man das halt verhindern. Und wie bekommt man dann die neuen Inhalte nachgeladen? Natürlich per AJAX.
Ich bin Informatiker, und wir sind ja grunsätzlich erstmal faule Leute. Wir wollen immer soviel wie möglich mit so wenig Einsatz wie nötig erreichen. Hier kommt jQuery ins Spiel, ein JavaScript Framework mit dem schönen Werbeslogan "The Write Less, Do More, JavaScript Library". Hört sich gut an. Mal sehen, was das so kann. Was muss ich machen?
HTML von einer anderen Seite laden/importieren
- Die Links im Menü modifizieren
- Den neuen Content nachladen
- Den alten Content mit dem Neuen ersetzen
$(document).ready(function() {
$("#pic_menue a").bind("click", function(e){
$("#contentContainer").html('<div style="margin-top:25%;margin-left:40%;"><img src="fileadmin/images/ajax-loader.gif" title="Inhalt wird geladen" alt="Inhalt wird geladen" /></div>');
$("#contentRight").html('');
var link = $(this).attr("href");
$("div.replaceLeft").load(link + " #contentContainer",function(){
$("#menuRight div.mycontent").load(link + " #contentRight");
});
return false;
});
});
Das wird angewendet auf eine Struktur, die in etwa so aussieht:
<div class="replaceLeft">
<div id="contentLeft">
<p>Hier steht Inhalt</p>
</div>
</div>
So. Was macht das jetzt genau? Die erste Zeile ist soweit noch klar: das Script wird ausgeführt, sobald das DOM "ready" ist. Nun müssen die Links mit einer Funktion belegt werden. Normalerweise würde man das für jeden Link einzeln über einen "onClick"-Handler erledigen. Hier gehts aber einfacher: die Links im Container mit der ID "#pic_menue" werden per bind() mit einer Funktion belegt. Die Funktion liefert übrigens false zurück, damit der eigentliche Link nicht doch noch geklickt werden kann.
Die nächste Zeilen (3 & 4) sind im Grunde kosmetischer Natur. Dort lade ich eine kleine Ladegrafik in den Hauptcontainer. "#contentRight" - das muss ich hier noch erwähnen - ist ein zweiter Contentcontainer, der auch noch nachgeladen werden soll. Den habe ich hier jetzt mal im Script dringelassen, um auch einmal das sog. Chaining zu dokumentieren, also das Ausführen mehrerer JavaScript-Funktionen hintereinander. "#contentRight" ist leider nicht immer belegt, weshalb ich ihn jeweils erstmal leeren muss.
Jetzt gehts ans Eingemachte: das Linkziel muss ausgelesen und in eine Variable geschrieben werden. Ok, das kann man auch direkt im Funktionsaufruf und ohne zusätzliche Variable "link" machen, aber dadurch wirds doch arg unübersichtlich.
Um die zu ersetzende Box liegt eine weitere Box mit der Klasse "replaceLeft". Über den Dollar-Operator spreche ich diese Box nun direkt an und führe darauf die Funktion "load()" aus, welche nichts anderes macht, als per AJAX die per Link übergebene Seite auszulesen und das als Parameter übergebene Element in das Elternelement zu schreiben. Oder auf Deutsch: wir laden "#contentRight" von der Seite "link" in "div.replaceLeft" hinein.
An sich wären wir hier schon fertig. Aber wie gesagt gibts auch noch eine weitere Box mit Inhalt, die auch nachgeladen werden muss. Dies kann dann direkt im Anschluss mit einem weiteren load()-Aufruf erfolgen. load() kann man als dritten Parameter eine sog. Callback-Funktion mitgeben, welche direkt im Anschluss aufgerufen wird. Also geben wir dem ersten load()-Aufruf einfach einen weiteren load()-Aufruf als Callback-Funktion mit und laden durch dieses Chaining-Verfahren ein zweites Element nach.
Fazit
Die Nachrüstung von AJAX-Funktionalität war in diesem Fall richtig einfach und ging fast ohne Modifikation des HTML-Codes vonstatten. Mit "fast" meine ich, dass ich beispielsweise um die Box "#contentLeft" noch eine weitere Box "replaceLeft" herumbauen und natürlich die JS-Dateien einbindne musste. Das sollte ein Laie aber auch noch hinbekommen.Der Vorteil an dieser Lösung ist, dass das Ganze auch bei Besuchern ohne JavaScript - wie auch beispielsweise Suchmaschinen - noch funktioniert, denn die Links an sich bleiben ja unangetastet. Und vor allem: man braucht nur etwas mehr als eine Hand voll Zeilen, um diesen Effekt zu erzielen.
Ich bin selbst allerdings nicht unbedingt Freund von solchen Lösungen. Es sieht zwar schön aus und lädt evtl auch schneller. Aber umgekehrt verliert man hier die Möglichkeit, beispielsweise die Browser-History zu verwenden. Man bleibt ja immer auf derselben Seite stehen. Außerdem kann man so auch nur sehr schwer Bookmarks auf die wirklich gewünschte Seite setzen. Glücklicherweise sind die Links ja jeweils noch intakt und können per Rechtsklick ein einem neuen Tab oder Fenster geöffnet werden. Aber da kommt auch nicht jeder Besucher drauf. Daher sollte jeder für sich bzw. sein Projekt den Einsatz noch einmal überdenken. Es ist nett, hip, fix, aber braucht man das?
PS: Basierend auf den verschiedenen Browser-Interpretationen kann es hier vorkommen, dass die Darstellung des Codes in den Boxen verschieden dargestellt wird und etwa die Zeilennummern nicht passen. Benutzt dann zur Anzeige bitte einen normalen Texteditor, der nicht einfach so umbricht.
PPS: Mehr dazu unter dem Label AJAX
