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

[lck]

Hallo zusammen,

na da hat sich doch einiges getan, freut mich!
Danke Holger für deine Änderungen. Vielleicht kannst du ja - wenn es Christoph recht ist - immer eine aktuelle Testversion zum Download anbieten, Somit würden bestimmt mehr Leute es testen und jedem bliebe die Arbeit des manuellen Anpassens erspart, auch in Hinsicht der möglichen Fehler beim Ändern.

Willkommen Frank, an dich habe ich auch schon gedacht, da ich auf deiner Seite gelesen habe, dass du onepage.js auch modifiziert hast.
Das mit dem eigenen Thread hatte ich ja bereits mal angeregt, sollte auch so sein.

Ja. Finde ich gut. Warten wir ab, was Ludwig dazu sagt. Er hat sicher auch noch einige Sachen in der Warteschleife.

Ich habe aber ohnehin schon versucht, wenigstens alles was bisher konkret vorgeschlagen bzw. gemeldet wurde, im Issue-Tracker zu vermerken.

In der Tat, es wurde schon einiges angeregt. Hauptproblem war/ist ein Ruckeln in der Scrollfunktion und mit der neuen Version von onepage.js gab es Probleme mit dem mobilen Browser Dolphin mit aktiviertem Jetpack.

Wünschenswert wäre noch:
1) Um die einzelnen OnePage-Seiten besser formatieren zu können, wäre ein zusätzlicher umschließender Container/umschließendes <div> mit einer neuen Klasse (numerisch aufsteigend) vor .onepage_page nicht schlecht.
2) Der Toplink ist immer anklickbar (also in der Version von Christoph), auch wenn er ausgeblendet ist. Vorausgesetzt man weiß, wo er sich ungefähr befindet
Macht irgendwie keinen Sinn, wenn die Seite eh ganz nach oben gescrollt ist. Stört weiter aber nicht.

[cmb]

Hm, an wen und wohin schicke ich denn nun

Vorschlag: stell es online (im Zweifel schicke den Link nur an Holger und mich per PM). Das spart Bandbreite.

Wir sollten auf jeden Fall noch Ludwigs Meinung hören.

ACK

Vorschlag: Javascript bzw. jQuery für Onepage wird als erstes festgeklopft. Schon wegen des Scrollings. Und nicht wegen einiger Vorlieben, sonder wegen Notwendigkeit.

Ihr habt ja recht. Ich mache dann die jQuery-Variante zum Default, und wer will kann sich das ja immer noch ändern.

Auf normalen CMSimple-Seiten kann ich auch anders (richardglahn.de)

Sehr gelungen. Kleinigkeit: jquery.backTop.min.js erzeugt jede Menge Debug-Ausgaben in der Browserkonsole. Das console.log() würde ich rausnehmen (eigentlich sollte es dort gar nicht erst drin gewesen sein).

[frase]

Danke Christoph,
isses jetzt wech?

Die Fehler kommen nicht im FF. Vivaldi hat sie gefunden (Chrome).

[cmb]

Danke Holger für deine Änderungen. Vielleicht kannst du ja - wenn es Christoph recht ist - immer eine aktuelle Testversion zum Download anbieten, Somit würden bestimmt mehr Leute es testen und jedem bliebe die Arbeit des manuellen Anpassens erspart, auch in Hinsicht der möglichen Fehler beim Ändern.

Da habe ich nichts dagegen. Alternativ ist es aber auch denkbar, dass sich interessierte Tester eine aktuelle Version von Github direkt herunter laden. Wenn Holger forken würde, dann könnte man ggf. dort herunter laden, und PRs wären schnell erledigt.

Hauptproblem war/ist ein Ruckeln in der Scrollfunktion und mit der neuen Version von onepage.js gab es Probleme mit dem mobilen Browser Dolphin mit aktiviertem Jetpack.

Danke für die Zusammenfassung, Ludwig. Irgendwie habe ich in diesem Thread den Überblick nie so richtig gehabt. Ich stelle diese beiden Punkte im nativen onepage.js (also ohne jQuery) aber erst mal zurück.

Wünschenswert wäre noch:
1) Um die einzelnen OnePage-Seiten besser formatieren zu können, wäre ein zusätzlicher umschließender Container/umschließendes <div> mit einer neuen Klasse (numerisch aufsteigend) vor .onepage_page nicht schlecht.

Klingt sinnvoll – vermerkt. Statt einer Klasse würde ich dann aber eigentlich eine ID bevorzugen – siehst Du da ein Problem?

2) Der Toplink ist immer anklickbar (also in der Version von Christoph), auch wenn er ausgeblendet ist. Vorausgesetzt man weiß, wo er sich ungefähr befindet
Macht irgendwie keinen Sinn, wenn die Seite eh ganz nach oben gescrollt ist. Stört weiter aber nicht.

Ist auf jeden Fall ein Bug.

isses jetzt wech?

Die Fehler kommen nicht im FF. Vivaldi hat sie gefunden (Chrome).

Ja, jetzt erscheinen die Debug-Ausgaben nicht mehr. (Sind übrigens keine Fehler im eigentlichen Sinne.)

[lck]

Wünschenswert wäre noch:
1) Um die einzelnen OnePage-Seiten besser formatieren zu können, wäre ein zusätzlicher umschließender Container/umschließendes <div> mit einer neuen Klasse (numerisch aufsteigend) vor .onepage_page nicht schlecht.

Klingt sinnvoll – vermerkt. Statt einer Klasse würde ich dann aber eigentlich eine ID bevorzugen – siehst Du da ein Problem?

Ich muss das revidieren, man braucht keine Klasse mit fortlaufenden Nummern - id's können daher nicht verwendet werden.

Beispiel - bisherige Ausgabe:

Code: Select all

<div id="Willkommen" class="onepage_page">
    ...Inhalt...
</div>

Wunsch - Beispiel:

Code: Select all

<div class="onepage_page_outer">
    <div id="Willkommen" class="onepage_page">
    ...Inhalt...
    </div>
</div>

Das id="Willkommen" bzw. id="0" (Numeric aktiviert) bringt für die Gestaltung per css eigentlich keine Vorteile, weil es im gleichen <div> steht wie die Klasse .onepage_page
Außerdem können sich die Namen (H1-Links) ändern, also auch die id's. "Numeric" verwende ich nicht, ich finde Namen in der URL schöner als #0, #1 usw.

Wie ich sehe wäre das in der Controller.php leicht anpassbar:

Code: Select all

$contents .= sprintf(
                    '<div id="%s" class="onepage_page">%s</div>',
                    $url, evaluate_scripting($c[$i])
                );

Die Frage stellt sich, ob es dann nicht Probleme mit den Sprungmarken/ScrollTo-Ankern gibt oder bei einem Update des Plugins bei alten OnePage-Seiten?

Per css könnte man es dann gestalten mit:

Code: Select all

.onepage_page_outer:nth-child(1) {...}
.onepage_page_outer:nth-child(2) {...}
/* ... */

.onepage_page:nth-child(1) {...}
.onepage_page:nth-child(2) {...}
/* ... */

/* oder per */
.onepage_page_outer:nth-child(odd) {...}
.onepage_page_outer:nth-child(even) {...}

.onepage_page:nth-child(odd) {...}
.onepage_page:nth-child(even) {...}

Aber das sind gestalterische Elemente, wichtiger sind in erster Linie die weiter oben genannten Probleme und Verbesserungen.

[Holger]

Danke Holger für deine Änderungen. Vielleicht kannst du ja - wenn es Christoph recht ist - immer eine aktuelle Testversion zum Download anbieten, Somit würden bestimmt mehr Leute es testen und jedem bliebe die Arbeit des manuellen Anpassens erspart, auch in Hinsicht der möglichen Fehler beim Ändern.

Da habe ich nichts dagegen. Alternativ ist es aber auch denkbar, dass sich interessierte Tester eine aktuelle Version von Github direkt herunter laden. Wenn Holger forken würde, dann könnte man ggf. dort herunter laden, und PRs wären schnell erledigt.

Also ich habe es jetzt mal als Demo installiert: http://holgerirmler.de/op_jquery/#OnePage_XH-mit-jQuery
Dort kann man das Plugin auch herunterladen.
Ich werde dann zeitnah einen Fork auf Github eröffnen, falls nach den Tests noch Bedarf besteht.

@Christoph: es läuft nun (sauber) mit und ohne aktiviertem JavaScript. Allerdings hattest Du Recht: ohne $sn geht es nicht. Die Menülinks von ihrem Pfad zu befreien ist also keine gute Idee. Am JS musste ich zusätzlich auch noch ein paar Prüfungen etc. einbauen um potentielle Fehler abzufangen. Auch ein weiterer Fix, ähnlich der ursprünglichen fixViewModeLink() - Funktion, war noch nötig. Trotzdem sind nur ein paar wenige Zeilen dazu gekommen.
Ich hoffe es passt so ziemlich...

LG
Holger

Sorry. Doch noch kein neuer Thread...

[frase]

@Holger

*** Awesome! ***

Wenn es bei mir eine Webcam gäbe, hättet ihr heute Nacht sehen können wie einer in den Tisch beißt.
Woher kommt denn diese kurze onepage.js? Ist das die Ursprungsversion?

Also, Schnelltest. Ich glaube, ich bekomme das hin, es in meinem Template zu verwenden.
Ist viel allgemeingültiger, mehr XH konform. Und klappt auch ohne JS. Dass ich trotzdem JS und jQ brauche ist klar.
(mein verquaster Code in Template und main.js fällt zu großen Teilen weg)

Da ich sowieso nicht gleich weitermachen kann, hier zwei Wünsche:
1. In der Plugin-Konfiguration möchte ich optional eine zweite Klasse zu "onepage_page" hinzufügen können.
Z.B. Ergebnis: "onepage_page container"
Die muss ich zwar wieder für Galerie usw. entfernen bzw. ändern, brauche ich aber für Bootstrap-Layout.
2. Es braucht einen optionalen top-Offset für Layouts/Templates mit fixer Nav oben. -> Konfiguration
Das hilft vielleicht auch anderen.

Kleine Anmerkung: <h1>!

Wir brauchen einen neuen OnePage Thread. Aber, das hier betrifft Ludwig ja ganz direkt.

[cmb]

Hui, hier ist ja ordentlich was los.

Ich muss das revidieren, man braucht keine Klasse mit fortlaufenden Nummern - id's können daher nicht verwendet werden.

Zunächst mal vielen Dank für die ausführliche Info – ich wusste schon gar nicht mehr, dass es bereits IDs gibt.

Ich kann das gerne so anpassen (eventuelle Problem mit den Sprungzielen können gewiss gelöst werden).

Per css könnte man es dann gestalten mit:
[…]

Hm, nth-child(N) ist aber eigentlich genauso fragil wie die numerischen oder namensbasierten IDs, oder? nth-child(odd|even) könnte man auch jetzt schon nutzen, wenn man es auf einen Container im Template bezieht (z.B. .tpllck_content), soweit ich es überblicke.

Eine ganz andere Alternative, die auch jetzt schon möglich ist, ist, dass der Anwender den <h1> Überschriften im Editor bestimmte Klassen zuweist, die eben vom Template unterstützt werden. Dann wäre es kein Problem die Überschriften zu ändern (abgesehen davon, dass dann Deep-Links nicht mehr funktionieren). Was hältst Du davon?

Also ich habe es jetzt mal als Demo installiert: http://holgerirmler.de/op_jquery/#OnePage_XH-mit-jQuery
Dort kann man das Plugin auch herunterladen.

Danke! Schau ich mir heute noch genauer an (hoffentlich!)

Woher kommt denn diese kurze onepage.js? Ist das die Ursprungsversion?

Vermutlich. Im Repo befindet sich die unminifizierte Version.

1. In der Plugin-Konfiguration möchte ich optional eine zweite Klasse zu "onepage_page" hinzufügen können.
Z.B. Ergebnis: "onepage_page container"
Die muss ich zwar wieder für Galerie usw. entfernen bzw. ändern, brauche ich aber für Bootstrap-Layout.

Ist eine zweite Klasse wirklich nötig? Kannst Du nicht über einen übergeordneten Container stylen (.container .onepage_page)? Vielleicht ist das eine dumme Frage, aber ich habe mich mit Bootstrap noch nicht beschäftigt.

2. Es braucht einen optionalen top-Offset für Layouts/Templates mit fixer Nav oben. -> Konfiguration

Geht da nicht ein .onepage_page {margin-top}?

[frase]

Nochwas,
um den gerade aktiven Menüpunkt hervorzuheben - auch während des Scrollens - ginge möglicherweise sowas Ähnliches in der onepage2.js:

Code: Select all

	/* ---------------------------------------------- /*
	 * aktiver Menüpunkt
	/* ---------------------------------------------- */
	// Pfadname
	var pfad = window.location.pathname;
	var sections = $('div[class="onepage_page"]')
		nav = $('nav[role="navigation"]');

	$(window).on('scroll', function () {
		var cur_pos = $(this).scrollTop();
		sections.each(function () {
			var top = $(this).offset().top - 76
				bottom = top + $(this).outerHeight();
			if (cur_pos >= top && cur_pos <= bottom) {
				nav.find('a').removeClass('active');
				// mit Pfad oder ohne
				nav.find('a[href="'+pfad+'#'+$(this).attr('id')+'"]').addClass('active');
				//nav.find('a[href="#' + $(this).attr('id') + '"]').addClass('active');
			}
		});
	});

Schlimm? Müsste natürlich von einem Programmierer überarbeitet werden. Vor allem was "nav" betrifft. Vielleicht XH-konform "menulevel..." oder so.

[lck]

Ich hoffe es passt so ziemlich...

Gute Arbeit Holger, danke. Heruntergeladen und in 2 verschiedenen OnePage-Templates getestet. Läuft soweit gut

Eine Sache ist mir auch schon in deiner Demo aufgefallen. Nachvollziehbar bei einem Viewport von kleiner 980px, also wenn das Menü für kleine Viewports aktiv ist.
Klickt man zum Beispiel auf "News02" springt die Seite fast zu "News03". Mit der Originalversion von Christoph passiert das nicht. Als Vergleich hier die Demo von op_ihaveadream mit Christoph's Version Onepage_XH-1beta1.

Wenn man die Scroll-Duration mal auf 3000 setzt, sieht man auch den Unterschied. Bei Christoph's Version wird erst das Menü geschlossen und dann gescrollt, bei deiner Version ist es umgekehrt.

2. Es braucht einen optionalen top-Offset für Layouts/Templates mit fixer Nav oben. -> Konfiguration
Das hilft vielleicht auch anderen.

Das Thema hatten wir auch schon mal angesprochen

Wir brauchen einen neuen OnePage Thread. Aber, das hier betrifft Ludwig ja ganz direkt.

Würde ich so nicht zustimmen, eigentlich ist das eine Plugin-Sache und keine direkte Template-Geschichte.