Onepage-Plugin - aktiver Menüpunkt

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
Post Reply
frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Onepage-Plugin - aktiver Menüpunkt

Post by frase » Sat Sep 11, 2021 2:27 pm

Nach dem Studium von gefühlt 2763 Beiträgen zum Thema Onepage-Plugin, bin ich so klug als wie zuvor.

Ist-Zustand:
In einem "normalen" Onepager wandert die Klasse "sdoc" beim Scrollen von Menüpunkt zu Menüpunkt - je nach Scroll-Position.
Verantwortlich dafür ist wohl die Funktion adjustMenuClasses() in onepage.min.js, wo wohl auch gleich der onepage_toplink() mitgeregelt wird.

Nun bin ich auf die glorreiche Idee gekommen, auf das JS-basierte Scrolling zu verzichten, und es mit CSS zu machen.
Das geht - und ein Offset (100px) ist auch realisierbar.
Der CSS-Code dazu:

Code: Select all

:root {
	scroll-behavior: smooth;
}
:target:before {
    content: "";
    display: block;
    height: 100px;
    margin: -100px 0 0;
}
Kleiner Nachteil dabei: Der TopLink ist permanent sichtbar.
Großer Nachteil dabei:
Die Klasse "sdoc" hängt am ersten Menüpunkt fest und bewegt sich kein Stückchen mehr - auch wenn man unendlich nach unten scrollt.

Das Schöne ist bzw. wäre, dass das gesamte Onepage-Template ohne JS auskommen könnte - wenn nicht die Hervorhebung des aktiven Menüpunktes gewünscht wäre.

Es steht also die Aufgabe, ein möglichst kleines JS-Script zu bauen, das die Sache mit dem aktiven Menüpunkt (sdoc oder etwas anderes) regelt.
Könnte man evtl. die Funktion adjustMenuClasses() dafür in eine eigene onepage.js übernehmen und alles Überflüssige entfernen?

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Onepage-Plugin - aktiver Menüpunkt

Post by cmb » Sat Sep 11, 2021 3:25 pm

frase wrote:
Sat Sep 11, 2021 2:27 pm
Nach dem Studium von gefühlt 2763 Beiträgen zum Thema Onepage-Plugin, bin ich so klug als wie zuvor.
Ich habe schon vor langer Zeit total den Überblick bzgl. Onepage verloren. Da gibt es wohl von Holger einen Fork und irgendwie meine ich mich an ein Multi-Onepage oder ähnlich zu erinnern.
frase wrote:
Sat Sep 11, 2021 2:27 pm
Es steht also die Aufgabe, ein möglichst kleines JS-Script zu bauen, das die Sache mit dem aktiven Menüpunkt (sdoc oder etwas anderes) regelt.
Könnte man evtl. die Funktion adjustMenuClasses() dafür in eine eigene onepage.js übernehmen und alles Überflüssige entfernen?
Könnte in etwa funktionieren. Die Funktion braucht aber das masterElement (entweder html oder document.element; kann sein, dass das nur für ältere Browser dynamisch ermittelt werden musste, und man es heutzutage hard kodieren könnte; kann aber auch sein, dass das Templatespezifisch ist), und das muss zunächst per initMasterElement() initialisiert werden. Und auf jeden Fall muss adjustMenuClasses() als Scroll-Handler registriert werden (on(window, "scroll", adjustMenuClasses);) oder halt ohne on(), etwa window.addEventListener("scroll", adjustMenuClasses).
Christoph M. Becker – Plugins for CMSimple_XH

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Onepage-Plugin - aktiver Menüpunkt

Post by frase » Sat Sep 11, 2021 3:40 pm

cmb wrote:
Sat Sep 11, 2021 3:25 pm
Könnte in etwa funktionieren.
Dachte ich mir. Danke.

Aber, woran liegt es, dass die "sdoc" nicht mehr mitwandert?
Das müsste ich zuerst lösen und mich dann an die Verschlankung des JS machen.
Hast du da eine Idee?

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Onepage-Plugin - aktiver Menüpunkt

Post by cmb » Sat Sep 11, 2021 5:00 pm

frase wrote:
Sat Sep 11, 2021 3:40 pm
Aber, woran liegt es, dass die "sdoc" nicht mehr mitwandert?
Das müsste ich zuerst lösen und mich dann an die Verschlankung des JS machen.
Hast du da eine Idee?
Wird adjustMenuClasses() denn überhaupt aufgerufen? Falls ja, dann prüfe, ob ein JS-Fehler angezeigt wird. Falls nicht, dann prüfe, ob getSelectedId() den gewünschten Wert liefert. Falls ja, wäre eine Online-Demo oder ein Download wohl hilfreich.
Christoph M. Becker – Plugins for CMSimple_XH

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Onepage-Plugin - aktiver Menüpunkt

Post by frase » Sat Sep 11, 2021 6:18 pm

cmb wrote:
Sat Sep 11, 2021 5:00 pm
Falls ja, wäre eine Online-Demo oder ein Download wohl hilfreich.
Da werde ich wohl etwas (allgemein zeigbares) zur Demonstration bauen müssen.
Folgt demnächst.

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: Onepage-Plugin - aktiver Menüpunkt

Post by lck » Sat Sep 11, 2021 7:31 pm

frase wrote:
Sat Sep 11, 2021 2:27 pm
Das Schöne ist bzw. wäre, dass das gesamte Onepage-Template ohne JS auskommen könnte - wenn nicht die Hervorhebung des aktiven Menüpunktes gewünscht wäre.

Es steht also die Aufgabe, ein möglichst kleines JS-Script zu bauen, das die Sache mit dem aktiven Menüpunkt (sdoc oder etwas anderes) regelt.
Könnte man evtl. die Funktion adjustMenuClasses() dafür in eine eigene onepage.js übernehmen und alles Überflüssige entfernen?
Siehe hier viewtopic.php?t=14957#p71260.
In der Konfiguration von Onepage_XH die JS-Einbindung ausschalten oder alternativ als onepage.js speichern (ungetestet).
In op_slidemecrazy habe ich das verwendet.
frase wrote:
Sat Sep 11, 2021 2:27 pm
Kleiner Nachteil dabei: Der TopLink ist permanent sichtbar.
Das ließe sich auch schon per CSS einigermaßen lösen. Das verrate ich aber nur dir ;) .
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Onepage-Plugin - aktiver Menüpunkt

Post by frase » Sun Sep 12, 2021 1:38 am

Aaalsooo:
Es wird uns nicht wirklich leicht gemacht ...
Die Ursache dafür, dass der aktive Menüpunkt nicht mit "sdoc" hervorgehoben wurde, ist diese CSS-Regel:

Code: Select all

:root {
	scroll-behavior: smooth;
}
In Anbetracht der Tatsache, dass das sowieso im Safari nicht in jedem Fall funktioniert und dass das wandernde "sdoc" überhaupt nur per JS zu erreichen ist, dann kann ich auch gleich das originale JS aus dem Onepage-Plugin nehmen.
Meine Überlegung, kein oder weniger JS zu verwenden, ist damit hinfällig - denn damit funktioniert es.
lck wrote:
Sat Sep 11, 2021 7:31 pm
Siehe hier viewtopic.php?t=14957#p71260.
In der Konfiguration von Onepage_XH die JS-Einbindung ausschalten oder alternativ als onepage.js speichern (ungetestet).
In op_slidemecrazy habe ich das verwendet.
Tja, das erfordert nun auch noch jQuery - was ich in diesem Fall nun wirklich nicht will.
lck wrote:
Sat Sep 11, 2021 7:31 pm
frase wrote:
Sat Sep 11, 2021 2:27 pm
Kleiner Nachteil dabei: Der TopLink ist permanent sichtbar.
Das ließe sich auch schon per CSS einigermaßen lösen. Das verrate ich aber nur dir ;) .
Clever gemacht, aber:
.scroll-to-top => top: 30vh - das scheint mir gewagt. Es gibt mittlerweile sehr große Bildschirme oder auch welche mit Pivot-Funktion. Ob das dann noch klappt?
Trotzdem Dank für die Tipps.

Was lerne ich aus dieser ganzen Chose?
Nichts. Außer vielleicht, dass ich nicht immer alles verschlimmbessern wollen sollte.
Ah, doch eines gelernt. Ich kann einen Offsetwert für die Scrollziele mittels CSS erreichen:

Code: Select all

:target:before {
    content: "";
    display: block;
    height: 100px;
    margin: -100px 0 0;
}
Das ist doch auch schonmal was ;-)

Vielen Dank für eure Hilfe.

Nachtrag:
Es bleibt mir aber immer noch schleierhaft, warum "scroll-behavior: smooth;" die korrekte Ausführung des JS-Skriptes ohne jegliche
Fehlermeldung verhindert.

Post Reply