OnePage mit jQuery [abgetrennt von OP-Template "OP_IHave a

[cmb]

Es gibt noch ein Problemchen mit deinem Script, wenn Seitennamen gleich beginnen:

Such im Script mal nach `href*=`, sollte zweimal vorkommen. Und dann durch `href$=` ersetzen. Nicht getestet.

[frase]

@Christoph
Wow, das war's!
Danke!

@Holger
mitgelesen?

[cmb]

@Christoph
Wow, das war's!
Danke!

Prima!

@Holger
mitgelesen?

Hoffentlich. Ich Holger mal zur Mitarbeit im Repo eingeladen, weil er sich wohl mittlerweile mit Onepage_XH besser auskennt als ich.

[Holger]

Hallo zusammen!

Ja, ich habe mitgelesen. Im Moment habe ich aber wenig Zeit dafür. Bis über's Wochenende wird es aber vermutlich Neues von mir geben.

Such im Script mal nach `href*=`, sollte zweimal vorkommen. Und dann durch `href$=` ersetzen. Nicht getestet.

Ja, das gierige Sternchen ist hier falsch. Aber Übereinstimmungen nur am Ende Strings zu matchen scheint auch nicht die ganze Lösung zu sein.
Gescheiter ist wohl die eindeutige Prüfung, mit zum Beispiel

Code: Select all

$(this).prop("hash") == hash

direkt in der ersten .each() Schleife. Das spart dann gleich noch den folgenden, erneuten Durchlauf von find().

Gegen das Blitzdingsen im IE11 habe ich keine Lösung. Vermutlich wirklich ein Browser-Bug. Aber wen wunderts? MS selbst versteckt ihn unter Win10 so sehr, dass man ihn kaum findet . Was nun? UA-Sniffing und Historie / Adresszeile beim IE11 nicht anpassen? Und / oder zumindest das Feature konfigurierbar machen?

Und zum Ruckeln in manchen Browsern: ich habe jetzt CSS3 Transitions implementiert und animate() nur als Fallback für ältere Browser gelassen. Dadurch hat man deutlich höhere Frame-Raten und alles sieht viel "smoother" aus. Ich hab' nur noch ein Problem, wenn bereits andere Animationen laufen (wie in meinem Demo-Template). Ich schau' mal, wann und wie (und ob überhaupt ) ich da weiter komme.

LG
Holger

[Holger]

Kurzer Zwischenbericht:

ich habe in der Demo mal für Browser, die CSS3 verstehen, das Smoothscrolling entsprechend eingebaut. Fallback für ältere Browser ist dann jQuerys animate(). Das scheint mir wirklich die sauberste Variante zu sein (bitte unbedingt Cache richtig löschen, sonst ruckelt es fürchterlich).
Browser Historie und aktualisieren der der Adresszeile wird beim IE11 hier abgeschaltet (UA-Sniffing ) und ist auch generell per Konfig-Variable abschaltbar.
Scrollen mit gleichmäßiger Geschwindigkeit will ich optional noch einbauen (Funktionalität ist schon auskommentiert im Skript enthalten).
Auch das IE11 - Problem (alle Navigationspunkte aktiv) ist mit dem Tausch von "*" gegen "$" doch gelöst und so eingebaut.

Texte und Downloads habe ich noch nicht aktualisiert. Das JS kann man aber problemlos einfach per Browser downloaden.

Vielleicht mag mal jemand schauen?

[lck]

Hallo Holger,

danke für deine Arbeit. Ich habe deine Demo mal gestestet, ich rede hier mal nur vom IE 11 aber auch in den anderen Browsern sieht es nicht gut aus, aber im IE sieht man die Probleme am ehesten.

- Das Blitzen ist jetzt erst recht zu sehen, zumindest bei mir
- Scrollt man vom 1. Menüpunkt zum Letzten, zieht sich die Scroll-Leiste wie ein Kaugummi und springt dann am Ende ruckartig
- Scrollt man vom letzten Menüpunkt zum ersten wird die Scroll-Leiste etwas zusammengedrückt
- Scrollt man von Menüpunkt zu Menüpunkt sieht man auch warum es blitzt. Die Seite scrollt zur neuen Position, springt dann kurz an den Anfang der Seite und dann wieder zurück

- Die Hervorhebung des aktiven Links beim Scrollen hast du anscheinend deaktiviert

[Holger]

Hallo Ludwig,

- Das Blitzen ist jetzt erst recht zu sehen, zumindest bei mir

Kann ich nicht nachvollziehen, auch nicht auf einer anderen Maschine.

- Scrollt man vom 1. Menüpunkt zum Letzten, zieht sich die Scroll-Leiste wie ein Kaugummi und springt dann am Ende ruckartig

Die Scroll-Leiste, aber nicht die Inhalte!

- Scrollt man vom letzten Menüpunkt zum ersten wird die Scroll-Leiste etwas zusammengedrückt

Es geht ja um die Animation des Inhaltes, nicht der Scroll-Leiste. Die kann ja nicht sauber scrollen, da die Animation mittels Top-Margin per CSS gemacht wird und überhaupt nicht gescrollt wird.

- Die Hervorhebung des aktiven Links beim Scrollen hast du anscheinend deaktiviert

Nein, da nicht wirklich gescrollt wird, kann ich beim (nicht vorhandenen) Scrollen auch - mangels Scroll-Event - nichts animieren .

Die Lösung per CSS3 bietet die besten Frameraten. Aber auf meinem alten HP-Touchpad mit Android 4 läuft selbst das nicht ganz sauber. Vielleicht testest Du die Seite auch einmal auf einer anderen Maschine und andern Browsern? Im aktuellen FF und Chrome scrollt die Seite einwandfrei. Edge und IE11 beenden die Animation am Ende etwas "hart". Da könnte man etwas mittels Easing vertuschen.

Gibt es eigentlich eine freie Software, mit der man den Bildschiminhalt mal als gut aufgelöstes Video capturen könnte? Die Arbeit würde ich mir echt mal machen...

Ansonsten bin ich mit meinem Latein jedenfalls am Ende:
- native Variante von Christoph zickt beim IE und in Dolphin
- jQuery ist zu lahm
- CSS3 macht unschöne Scrollbalken....

LG
Holger

[cmb]

- Das Blitzen ist jetzt erst recht zu sehen, zumindest bei mir

Kann ich nicht nachvollziehen, auch nicht auf einer anderen Maschine.

Ich auch nicht. Ist vielleicht noch was im Browser-Cache?

Gibt es eigentlich eine freie Software, mit der man den Bildschiminhalt mal als gut aufgelöstes Video capturen könnte? Die Arbeit würde ich mir echt mal machen...

Empfehlen kann ich nichts, da noch nicht verwendet, aber google mal nach "screen capture" oder so, da wird man wohl fündig.

Ansonsten bin ich mit meinem Latein jedenfalls am Ende:
- native Variante von Christoph zickt beim IE und in Dolphin
- jQuery ist zu lahm
- CSS3 macht unschöne Scrollbalken....

Ist schon ein Leid. Vielleicht könnte man aber wenigstens für seltene Browser (Dolphin mit Jetpack z.B.) die entsprechenden Funktionen komplett unterdrücken, zumindest falls dabei nicht wieder UA-Sniffing nötig wäre. IE ist natürlich ein Problem.

[Holger]

Hallo Christoph,

IMHO muss man da nichts machen. Per CSS ist die Animation einwandfrei. Im IE 11, Edge, FF und Chrome und Safari. Opera habe ich nicht getestet, da wird es aber sicher ähnlich sein. Und mal ehrlich: was juckt der Kaugummi-Scrollbalken?
Warum das bei Ludwig nicht klappt, verstehe ich nicht. Aber auf den Cache hatte ich extra hingewiesen. Da gab es bei mir nämlich auch Probleme.

Vielleicht testet ja noch jemand...

[lck]

Vielleicht testet ja noch jemand...

Das wäre gut.

Ich auch nicht. Ist vielleicht noch was im Browser-Cache?

Den Hinweis von Holger habe ich gelesen und habe den Cache aller Browser komplett gelöscht und sogar mit CCleaner nochmals bereinigt. Kann mir nicht vorstellen, dass da noch irgendwas gecacht ist.
Wenn das Blitzen/hüpfen der Scrollleiste/Seite im IE11 (Windows 7 64bit) nur bei mir auftritt, vermute ich, dass es evtl. an einer internen Einstellung im IE liegt

Ich schicke euch mal per PN einen Link zu einem Video in dem ich das aufgezeichnet habe.