OnePage-Template "OP_IHaveADream" (responsive)

Please post the URLs to pages, where you've made a CMSimple template available for download

Moderator: mikey

Holger
Site Admin
Posts: 3470
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany

Re: OnePage-Template "OP_IHaveADream" (responsive)

Post by Holger » Sat Feb 06, 2016 10:35 pm

Hallo Ludwig,
lck wrote: Ich schaus mir noch mal an. Den Top-Link-Button habe ich in der Demo mal aktiviert, vorher wurde er bei einem Viewport unter 980px per Media-Queries ausgeblendet.
Sorry, ich meinte im Portrait-Modus. Natürlich war er da dann ausgeblendet. Immer sichtbar, scheint mir aber besser zu sein.
lck wrote:Aber du schreibst ja, dass nur der Pfeil nicht angezeigt wird. Da hieße die Browser (welche?) können keine UTF-8 Zeichen darstellen, da müsste man dann evtl. wieder ein Image verwenden.
Richtig, nur das Pfeil-Symbol fehlt. Der Button ist sichtbar. Das tritt bei mir mit allen Browsern auf (FF, Chrome, Dolphin - jew. aktuellste Version). Aber vielleicht liegt es an meinem Gerät. Es ist ein altes HP-Touchpad mit Android 4.4.4 (CyanogenMod). Leider habe ich im Moment kein anderes Android-Gerät. Aber bei Dir funktioniert die Anzeige ja unter Android sauber, oder?

Die neue Demo hat jetzt leider ein anderes Problem. Beim Sprung per Navigation auf einen Anker verrechnet sich das Scroll-Script um die Höhe des Navigationsmenüs. Genauer gesagt rechnet es zwar richtig, aber das Menü schließt sich ja erst nach der Berechnung der Sprungmarke. Die Seite scrollt somit an die richtige Position, danach schließt sich das Menü und der Inhalt scrollt um die Menühöhe nach oben.
Eventuell müsste die berechnete Menühöhe als Offset addiert werden. Aber das wird komisch aussehen, weil dann zuerst zu weit gescrollt wird und danach die Seite - mit der Geschwindigkeit des schließenden Menüs, noch oben scrollt.
Der sauberste Weg wäre: zuerst das Menü sofort schließen, danach in einem Rutsch zur richtigen Stelle scrollen. Das könnte man ja anpassen...

LG
Holger

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

Re: OnePage-Template "OP_IHaveADream" (responsive)

Post by lck » Sun Feb 07, 2016 12:56 pm

Holger wrote:Sorry, ich meinte im Portrait-Modus. Natürlich war er da dann ausgeblendet. Immer sichtbar, scheint mir aber besser zu sein.
Ich hatte ihn deshalb ausgeblendet, weil manche mobile Browser wie Opera und Dolhin einen browsereigenen Scroll-To-Top-Button anzeigen sobald man in der Seite etwas noch oben scrollt. Zwei davon schaut auch etwas komisch aus.
Holger wrote:Richtig, nur das Pfeil-Symbol fehlt. Der Button ist sichtbar. Das tritt bei mir mit allen Browsern auf (FF, Chrome, Dolphin - jew. aktuellste Version). Aber vielleicht liegt es an meinem Gerät. Es ist ein altes HP-Touchpad mit Android 4.4.4 (CyanogenMod). Leider habe ich im Moment kein anderes Android-Gerät. Aber bei Dir funktioniert die Anzeige ja unter Android sauber, oder?
Durch die Aktivierung in der Demo konnte ich das jetzt auch testen. Du hast recht, der Pfeil wird nicht angezeigt, nur Firefox zeigt ihn, aber auch nicht sauber zentriert. Zumindest ist das bei mir so.
Holger wrote:Die Seite scrollt somit an die richtige Position, danach schließt sich das Menü und der Inhalt scrollt um die Menühöhe nach oben.
Stimmt, am Desktop-Computer konnte ich das nachvollziehen, auf dem Android 4.0.4 nicht. Danke für die Hinweise.

Solange das Smooth-scroll-Problem in Onepage-XH nicht gelöst ist, empfehle ich die Templates nicht produktiv einzusetzen!

Einzige Möglichkeit wäre momentan, das mobile Menü statisch zu machen und für den Toplink-Button ein Bild zu verwenden, das sollte jeder Browser richtig darstellen können!?
Aber das löst nicht das Smooth-Scroll-Problem unter Dolphin mit aktiviertem Jetpack.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Holger
Site Admin
Posts: 3470
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany

Re: OnePage-Template "OP_IHaveADream" (responsive)

Post by Holger » Sun Feb 07, 2016 2:22 pm

Hallo Ludwig,

nach wie vor ist mein Favorit die erste Variante des Templates mit dem Button zum öffnen der Navigation.

Ich fasse mal zusammen:
- keine bekannten Probleme mit den aktuellen Desktop-Browsern
- bei den Mobile-Browsern macht nur Dolphin mit JetPack solche Probleme, dass die Seite unbenutzbar wird

In Dolphin/JetPack funktioniert der Menü-Button nicht, außerdem crasched das Smooth-Scroll-Skript aus OnePage_XH. Weiterhin wird das Pfeil-Symbol im Top-Link nicht angezeigt.
Die Ursache aller Probleme mit Dolphin scheint ein Bug beim Styling von fixed-positionierten Elementen zu sein.

Beispiel Menü-Button:

Code: Select all

psition: fixed;
margin: 0 auto;
wird nicht richtig dargestellt.
Der Button wird links unten zwar angezeigt, die Klickfläche liegt aber irgendwo außerhalb.
Ähnlich ist das mit dem Pfeil-Symbol. Es ist zwar enthalten, aber irgendwo im unsichtbaren Bereich.
Offenbar kommt Dolphin dann so im DOM durcheinander, dass das Smooth-Scroll-Skript nicht mehr funktioniert. Genau gesagt funktioniert es eigentlich noch, aber die Sprungmarken werden nicht mehr gefunden.

Meine Lösung ist jetzt, den Menübutton anders positionieren. Zum Beispiel funktioniert:

Code: Select all

.tpllck_nav_toggle {
	background: #000;
	border: 1px solid #FFF;
	border-radius: 4px;
	box-shadow: 0px 0px 0px 5px #000;
	/*margin: 0 auto;*/
	position: fixed;
	bottom: 10px;
    right: 10px;
	/*left: 0;*/
	/*right: 0;*/
	text-align: center;
	width: 50px;
	z-index: 9999;
}
Der Menübutton liegt dann in der rechten unteren Ecke und Dolphin öffnet und schließt das Menü wie gewollt :) .
Ab hier funktioniert jetzt auch wieder das in OnePage_XH enthaltene Scroll-Skript.

Für das nicht vorhandene Pfeil-Symbol habe ich, der Einfachheit halber, wieder das img - Icon aktiviert und die alten CSS-Einstellungen für den Link entsprechend entfernt / angepasst.
Jetzt funktioniert bei mir auch in Dolphin mit JetPack alles.
lck wrote:
Holger wrote: Sorry, ich meinte im Portrait-Modus. Natürlich war er da dann ausgeblendet. Immer sichtbar, scheint mir aber besser zu sein.
Ich hatte ihn deshalb ausgeblendet, weil manche mobile Browser wie Opera und Dolhin einen browsereigenen Scroll-To-Top-Button anzeigen sobald man in der Seite etwas noch oben scrollt. Zwei davon schaut auch etwas komisch aus.
Stimmt. Ich habe ihn auch wieder entfernt. Er ist ja auch nicht nötig,wenn der Menü-Button funktioniert.

LG
Holger

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

Re: OnePage-Template "OP_IHaveADream" (responsive)

Post by lck » Mon Feb 08, 2016 11:11 am

Hallo Holger,

super, sehr gut! Danke für das Finden des Problems und die Lösung!
Werde das Template dann die Tage dementsprechend ändern, auch das Pfeilsymbol.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

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

Re: OnePage-Template "OP_IHaveADream" (responsive)

Post by lck » Mon Feb 08, 2016 2:30 pm

Holger wrote:Der Menübutton liegt dann in der rechten unteren Ecke und Dolphin öffnet und schließt das Menü wie gewollt
Habs mal getestet. Der Button ist klickbar, das Menü öffnet, aber wenn man irgendwo in der Seite ist und den Button drückt springt die Seite nicht nach oben zum Menü.
Holger wrote:Ab hier funktioniert jetzt auch wieder das in OnePage_XH enthaltene Scroll-Skript.
Bei mir nicht unter Android 4.0.4 und Dolphin V 11.5.4, gleiches Problem wie vorher.

Bei deaktiviertem Dolphin Jetpack gehts. War Jetpack bei dir auch wirklich aktiviert?
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Holger
Site Admin
Posts: 3470
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany

Re: OnePage-Template "OP_IHaveADream" (responsive)

Post by Holger » Mon Feb 08, 2016 2:40 pm

lck wrote: Bei deaktiviertem Dolphin Jetpack gehts. War Jetpack bei dir auch wirklich aktiviert?
Ja, ganz sicher.
lck wrote:Habs mal getestet. Der Button ist klickbar, das Menü öffnet, aber wenn man irgendwo in der Seite ist und den Button drückt springt die Seite nicht nach oben zum Menü.
Entferne doch erst noch den Code für das Pfeilsymbol. Aber ich meine, es hätte bei mir schon mit der Änderung des Buttons geklappt. Aber, wer weiß...

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

Re: OnePage-Template "OP_IHaveADream" (responsive)

Post by lck » Mon Feb 08, 2016 3:16 pm

Nein, gleiches Ergebnis wie oben.

Das kann auch nicht die Ursache für das Problem gewesen sein. Wenn ich meine anderen OnPage-Templates mit Dolphin-Jetpack teste, sehe ich das gleiche Probem. DerSprung zum Anker funtioniert nicht.

Nachtrag:
Wahrscheinlich ist die Jetpack-Version das Problem, unter Android kleiner 4.3 gibts nur das alte Jetpack 6.x (bei mir ist es Version 6.2.4)
Auszug aus Wikipedia:
Mit dem Browser-Add-on Dolphin Browser Jetpack kann die eigens entwickelte HTML-5-Rendering-Engine dem Dolphin Browser nachgerüstet werden. Bis Version 6.x nutze man die Webkit-Engine, die als Standardbrowser anstelle von Chrome auf vielen Geräten installiert war. Mit der Zeit wurde damit das Ergebnis auf html5test.com schlechter als mit anderen Browsern. Darüber hinaus gab es Probleme mit dem Rendering, sodass aufwendigen Webseiten oder Webseiten im Desktop-Modus ständig beim Scrollen blinkten. Auch gab es des Öfteren Abstürze. Als jedoch die Version 7.0 veröffentlicht wurde, benutzte man von nun an die Blink-Engine von Chrome, sodass sich die Ladegeschwindigkeiten verbessert haben und sich das Ergebnis des HTML5-Tests enorm verbesserte, sowie die Rendering-Probleme verschwanden. Die Versionen ab 7.x werden für Android 4.3 oder höher verfügbar sein; Versionen unter Android 4.3 sind nur mit Jetpack 6.x kompatibel. Darüber hinaus ist es, im Gegensatz zum Dolphin Browser Beta, im Google Play Store erhältlich.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Holger
Site Admin
Posts: 3470
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany

Re: OnePage-Template "OP_IHaveADream" (responsive)

Post by Holger » Mon Feb 08, 2016 8:11 pm

lck wrote:Wahrscheinlich ist die Jetpack-Version das Problem
Glaube ich nicht, denn die Testversion von Dir funktioniert bei mir auch nicht :shock: .

Es ist schon ein Kreuz :roll: .

Versuche es doch bitte einmal mit meiner Testversion:
http://holgerirmler.de/dolphintest/
Da funktioniert bei mir alles. An der template.htm sind hier keine Anpassungen. Alle Änderungen beziehen ausschließlich auf das stylesheet.

Allerdings habe ich da ein paar weitere Sachen probehalber angepasst (overflow für linke Spalte, Größe der Navigationsbuttons etc.). Jedoch hatte das keine Auswirkung auf die Lauffähigkeit mit JetPack. Erst durch die Änderung der Definition des Menü-Buttons funktionierte das Template, soweit ich mich richtig erinnere.

Vielleicht liegt es ja an meinen eher rudimentären CSS-Kenntnissen.... Wenn Du nicht erkennst, woran es liegt, müsste ich alle Änderungen nochmal einzeln nachvollziehen.

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

Re: OnePage-Template "OP_IHaveADream" (responsive)

Post by lck » Mon Feb 08, 2016 9:39 pm

Holger wrote:Es ist schon ein Kreuz
Das stimme ich dir zu! Aber jetzt habe ich den Wurm gefunden!! :D

Hab dein css in mein Template kopiert und mit Dolphin Jetpack getestet und was soll ich sagen, das funktionierte auch nicht.

Da bin ich doch stutzig geworden, es kann also nur an meiner Installation oder einem Plugin liegen. Das Problem ist die NEUE onepage.js für OnePage_XH, siehe Thread. Da wurde mal ein Ruckeln beanstandet, natürlich hatte ich seitdem die neue Version verwendet, deswegen gibt es auch Probleme bei den anderen Onepage-Demos mit Dolphin Jetpack. Alte Version wieder aktiviert und es läuft!

Aber die onepage.js sollte man sich doch einmal genauer anschauen. Was ist da der Konflikt?
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Holger
Site Admin
Posts: 3470
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany

Re: OnePage-Template "OP_IHaveADream" (responsive)

Post by Holger » Mon Feb 08, 2016 9:55 pm

lck wrote:Alte Version wieder aktiviert und es läuft!
Hmm, ich habe nur die Version, die bei Onpage_XH im Download dabei war. Ein manuelles Update der onepage.js habe ich nie gemacht. Und trotzdem hat ja die erste Version des Templates nicht mit Dolphin/Jetpack funktioniert.
Verstehe ich es richtig, dass nun auch die Testversion von Dir mit der alten onepage.js läuft, die ursprüngliche erste Version des Templates aber nicht (auch nicht mit der alten onepage.js)?
Bald blicke ich nicht mehr durch...
lck wrote:Aber die onepage.js sollte man sich doch einmal genauer anschauen. Was ist da der Konflikt?
Ich kann die Versionen mal vergleichen, aber Christoph hat da deutlich mehr Ahnung.

Post Reply