Im 2. Teil widmen wir uns Ajax per jQuery, die Seiten der oberen Navigation werden per Ajax vom Server geholt und dann in den Content der Seite eingefügt. Dabei habe ich berücksichtigt, dass die Seiten zu bookmarken sind und die Vor‑/Zurück-Funktion des Browser erhalten bleibt. Als Schmankerl wird der Title ersetzt, somit wird auch dieser beim Bookmarken übernommen.
Sozusagen unobtrusive Javascript, barrierefreies Javascript.
Nun genug geschwafelt, Tutorial starten oder gleich zum zweiten Teil springen.
Am 26. März 2009 um 00:37 Uhr schrieb Ryco Meyer:
Hallo!
Ich habe das Tutorial getestet und bin dabei auf ein Problem gestoßen, wenn man die aktuelle Version (1.3.2) der jQuery-Bibliothek benutzt. Die Vor‑/Zurück-Funktion des Browser erzeugt bei der Version einen Javascript Fehler. Bei der in dem Tutorial beschriebenen Version 1.2.6 funktioniert das aber problemlos.
Ansonsten bin ich sehr dankbar für dieses Tutorial, da es genau das beschreibt, was ich gesucht habe.
Grüße
Am 26. März 2009 um 23:05 Uhr schrieb Olaf:
Hi Ryco,
freut mich geholfen zu haben. Ja, irgendwann muss ich alles hier noch mal auf die 1.3.2 umstellen. Ich komm nur gerad nicht dazu. Falls du magst kannst du mir ja mal ne Mail mit dem Link zur Fehlermeldung schicken.
Update, 5 nach 1
Hm, hab es jetzt einfach mal gewagt und die neue Version hochgeladen, ich kann nirgends Fehlermeldungen entdecken. Hier scheint alles wie gewohnt zu laufen.
Am 5. Juni 2009 um 21:45 Uhr schrieb Regina Müller:
Hallo Olaf,
ich warte schon ungeduldig auf den dritten Teil des Tutorials!
Grüße aus Berlin,
Regina
Am 7. Juni 2009 um 23:49 Uhr schrieb Olaf:
Regina, vielen Dank für die Erinnerung 🙂
Ich hatte es wirklich schon 2–3 Wochen fertig hier rumliegen, ich schob es immer wieder vor mir her, bis ich es vergaß.
Guck, da isses
Am 6. Mai 2010 um 02:10 Uhr schrieb Regina Müller:
Nach langen, langen Monaten finde ich nun mal die Zeit, mich endlich zu bedanken!
Du hast mir sehr geholfen, allerdings hab ich noch ein kleines Problemchen:
Ich hab in die hier von Dir vorgestellte Lösung eine PrettyPhoto –Box eingebaut, funktioniert auch, aber nur auf der ersten Seite. Sobald man sich durch die Seiten bewegt, und in der Eingabeleiste das „remote-x“ erscheint, funktioniert die PrettyPhoto-Box nicht mehr.
Woran könnte das liegen?
Grüße aus Berlin,
Regina
Am 6. Mai 2010 um 10:23 Uhr schrieb Olaf:
Hi Regina,
ist klar das es nicht funktioniert, der Funktion sind ja die nachgeladenen Links nicht bekannt. Du könntest als erstes versuchen an der Stelle wo ich bei mir das „code_viewer();“ reinitialisiere einfach noch einmal deinen Code für prettyPhoto einzufügen.
P.S.: Teil 4 muss ich auch noch mal machen, leider komm ich einfach nicht dazu 🙁
Am 9. Mai 2010 um 13:53 Uhr schrieb lena:
Hallo Olaf,
dein tut hat mich total begeistert, so sehr das ich seit tagen versuche es in meine homepage einzuarbeiten, doch leider erfolgslos 🙁
mein problem ist, das ich bereits eine navigation mit jquery habe. nun möchte ich den texteffekt dazu einbinden und krieg es einfach nicht hin.
das macht mich total wahnsinnig.
villeicht kannst du mir ein tip geben, wie ich den effekt in eine andere navigation einbinden kann.
wäre dir sehr dankbar!!!
lg
Lena
Am 10. Mai 2010 um 10:23 Uhr schrieb Olaf:
Ohne zu wissen welche Funktion du bei deine Navi benutzt kann ich nix dazu sagen. Schick mir doch mal einen Link zu der Seite, dann schau ich mal…
Am 4. April 2011 um 18:13 Uhr schrieb Tommy:
Hallo Olaf,
dein Tutorial ist echt spitze! Hab mich riesig gefreut als ich dieses bei dir gefunden habe und mich gleich ans umsetzen gemacht. Zwar hat nicht alles auf anhieb gepasst, aber mittlerweile läuft es wie es soll.
Allerdings habe ich noch ein Problem und ich hoffe, dass du mir dabei vielleicht helfen kannst:
Die Website, welche ich gerade mit den JQuery Animationen ausgestattet habe, nutzt auch Unterseiten. Diese werden unterhalb der Top-Navi angezeigt, allerdings nur wenn die entsprechende Parentseite aufgerufen wird. Nach dem Einbau der Ajax-Animation werden die Unterseitenlinks gar nicht mehr angezeigt.
Weisst du was ich hier tun muss?
Vielen Dank schonmal im vorraus.
Beste Grüße,
Tommy
Am 5. April 2011 um 10:31 Uhr schrieb Olaf:
Hi Tommy,
das wird so einfach nix, leider muss ich dich da enttäuschen. Weil du ja hier keinen „Seitenwechsel“ durchführst wird auch nur der Inhalt ausgetauscht. Du müsstest die Navi der Unterseiten mit in diesem auszutauschendem Inhaltsbereich laden. Im Tutorial:
$("#nav a").remote('#content', '.entry', function() {.entry muss bei dir also die Unternavi zusätzlich enthalten, bzw. du musst einen Container auswählen der sie enthält, verstehst!?
Viel Glück…
Am 5. April 2011 um 11:06 Uhr schrieb Tommy:
Hallo Olaf,
erstmal vielen Dank für die schnelle Antwort und deinen Tipp. Genau die gleiche Idee ist mir gestern Abend auch noch gekommen. Hat insofern auch funktioniert, dass mir die Unterseitenlinks beim Seitenwechsel aktualisiert angezeigt werden.
Leider hat sich dadurch auch ein neues Problem eröffnet:
Ich habe im AJAX Code aus der ID NAV eine Klasse gemacht und diese der Subnavi ebenfalls zugewiesen. Wenn die Unterseitenlinks jedoch frisch geladen werden, fehlt mir zunächst der #remote-x Anhang (nur) bei diesen Links. Sobald ich aber auf einen Unterseitenlink klicke und die Seite geladen wurde mit den selben Unterseitenlinks, funktioniert die Ergänzung durch #remote-x auch bei den Unterseitenlinks.
Hast du eine Idee wie ich es bewerkstellige, dass das auf Anhieb klappt?
Beste Grüße aus dem Allgäu,
Tommy
Am 24. September 2012 um 14:10 Uhr schrieb Thorsten:
Ich finde das tutorials auch sehr gut. Allerdings hab ich Problem beim umsetzen in Contao. Ich nutze als document alias, nicht den meta title der seite.. somit laufen meine abfragen natürlich ins leere. Was kann ich tun, damit meine doc-alias beibehalten werden ala „meineseite.html“ usw.
gruss aus Berlin