OnePage-Template "OP_IHaveADream" (responsive)

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

Moderator: mikey

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

OnePage-Template "OP_IHaveADream" (responsive)

Post by lck » Sat Aug 29, 2015 5:26 pm

OnePage-Template with fixed Menu and Toggle-Menu for mobile devices (only menulevel1).

[ external image ]
[ external image ]

Tested with Google Chrome 43, Chrome Toggle device mode, IE11, Opera 12.17, Opera 30, Firefox 38, Opera Mobile Emulator.

Full Demo, Info and download

Best regards
Ludwig
„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 » Wed Jan 27, 2016 9:29 pm

Hi Ludwig,

Nice one, again :).

I've played around the first time with this template and found a problem with Dolphin-Browser on Android. The latest Dolphin releases have integrated their "Jetpack-Plugin" which seems to be the reason that the button for the mobile-menu is wrong positioned. And, beside this, you cannot activate the menu with the button. Therefore the page becomes unusable on mobiles.
Another problem is the horrible scrolling with that browser and it seems to break the smooth-scroll script.
If you turn off the "Jetpack" extension in the configuration, everything seems to work.

Any chance to have a fix for the issues, because Dolphin is very popular on Android and it seems most users are not aware about the by default enabled superduper Jetpack rendering engine...

KR
Holger

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: OnePage-Template "OP_IHaveADream" (responsive)

Post by Tata » Thu Jan 28, 2016 7:45 am

Maybe a script detecting the browser and toggled hidden instruction how to switch off the JetPack would be the solution?
e.g.:
http://stackoverflow.com/questions/2400 ... javascript
http://stackoverflow.com/questions/2999 ... javascript
http://stackoverflow.com/questions/9779 ... ser-in-php
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

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

Re: OnePage-Template "OP_IHaveADream" (responsive)

Post by lck » Thu Jan 28, 2016 11:00 am

Danke Holger und Tata für die Rückmeldung.

Das mit mit den Browsern ist schon manchmal frustrierend, je mehr ich mich mit css befasse, desto mehr sträuben sich mir die Haare, was sich die Browser-Hersteller so alles für Bug's und Issues leisten und bis heute noch nicht korrigiert haben. Zum Beispiel der display: inline-block; Bug oder bei Firefox und IE das border dashed Problem, von Safari und IOS ganz zu schweigen.

Der Dolphin Browser war für mich früher auch erste Wahl auf meinem Android Smartphone, weil er der schnellste Browser war. Aber nach einiger Zeit stellte ich immer mehr Probleme fest. Er stellte Webseiten fehlerhaft dar oder blieb einfach hängen. Das kann man auch immer noch im Playstore in den User-Bewertungen lesen. Schließlich bin ich auf Chrome umgestiegen, nebenher laufen noch Opera und Firefox.
Holger wrote:If you turn off the "Jetpack" extension in the configuration, everything seems to work.
Bei mir ist Jetpack von Haus aus ausgeschaltet, aber das Menü erscheint trotzdem nicht, zumindest unter Android 4.0.4 und der neuesten Dolphin Version. Anscheinend kann Dolphin weder mit position fixed, als auch mit Pseudoklassen wie target umgehen.
Holger wrote:Any chance to have a fix for the issues, ...
Lösung wäre, auf css3 Selektoren und Animationen ganz zu verzichten und das mobile Menü dauerhaft eingeblendet zu lassen.
Evtl. Javascript- oder jQuery-Menüs verwenden, damit scheinen die Browser weniger Probleme zu haben.

BTW: Christoph's Webseite ist momentan nicht mehr erreichbar.
„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 » Fri Jan 29, 2016 5:41 pm

Neue version ist online. Damit sollte auch Dolphin zurecht kommen, zumindest das Menü richtig öffnen.
An dem scrolling-Problem kann ich nichts ändern, das ist ein Dolphin- oder evtl. ein OnePage_XH-Plugin Problem?
„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 01, 2016 10:16 pm

lck wrote:Neue version ist online. Damit sollte auch Dolphin zurecht kommen, zumindest das Menü richtig öffnen.
An dem scrolling-Problem kann ich nichts ändern, das ist ein Dolphin- oder evtl. ein OnePage_XH-Plugin Problem?
Hmm, klappt bei mir noch immer nicht (Android 4.4.4, aktuellste Dolphin-Version). Das Menü öffnet zwar, beim Tap auf den Link bleibt die Seite aber stehen, anstatt zum entsprechenden Anker zu springen :( . Ich würde hier, für eine deutlich bessere Browserkompatibilität, auf jQuery umsteigen -- auch beim Smooth-Scroll-Skript.

LG
Holger

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

Re: OnePage-Template "OP_IHaveADream" (responsive)

Post by lck » Tue Feb 02, 2016 11:14 am

Holger wrote:Hmm, klappt bei mir noch immer nicht (Android 4.4.4, aktuellste Dolphin-Version). Das Menü öffnet zwar, beim Tap auf den Link bleibt die Seite aber stehen, anstatt zum entsprechenden Anker zu springen . Ich würde hier, für eine deutlich bessere Browserkompatibilität, auf jQuery umsteigen -- auch beim Smooth-Scroll-Skript.
Natürlich kann man das Menü auf jQuery umstellen, aber das Menü ist nicht das Problem.
Das Problem ist die smooth-scroll-Funktion im OnePage_XH Plugin und bei aktiviertem Jetpack im Dolphin Browser kommt es dann zu den bereits von dir genannten Problemen.
Ich habe mal 2 Versionen zum Testen online gestellt, die auch unter Dolphin funktionieren:
Smooth scroll in OnePage_XH deaktiviert
Smooth scroll in OnePage_XH deaktiviert und als Ersatz, ein einfaches smooth-scroll jQuery-script im Template eingebaut
„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 » Fri Feb 05, 2016 9:52 am

Holger wrote:Hmm, klappt bei mir noch immer nicht (Android 4.4.4, aktuellste Dolphin-Version). Das Menü öffnet zwar, beim Tap auf den Link bleibt die Seite aber stehen, anstatt zum entsprechenden Anker zu springen . Ich würde hier, für eine deutlich bessere Browserkompatibilität, auf jQuery umsteigen -- auch beim Smooth-Scroll-Skript.
@Christoph: könntest du dir das mal anschauen?
„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 » Fri Feb 05, 2016 12:06 pm

Ok, das Scroll-Problem lässt sich sicher einfach mittels jQuery lösen.

Was ich aber schade finde ist, dass jetzt der Button zum öffnen des Menüs entfernt werden musste.
Jetzt muss man lange scrollen um zum Menü zu kommen, da ja in der Mobile-Ansicht kein "Top-Link" Icon verfügbar ist.

Entweder müsste der Link zum öffnen des Menüs oben fix positioniert werden, oder eben eine andere Variante zum schnellen scrollen nach oben eingebaut werden.
Wie dem auch sei, richtig schön fand ich den unten positionierten Button in der Ursprungsvariante.

BTW: unter Android (Tablet mit 1024px, also "normale" Desktop-Ansicht) zeigt bei mir kein Browser den Pfeil im Top-Link-Button an... :?

LG
Holger

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

Re: OnePage-Template "OP_IHaveADream" (responsive)

Post by lck » Fri Feb 05, 2016 5:20 pm

Holger wrote:Entweder müsste der Link zum öffnen des Menüs oben fix positioniert werden, oder eben eine andere Variante zum schnellen scrollen nach oben eingebaut werden.
Wie dem auch sei, richtig schön fand ich den unten positionierten Button in der Ursprungsvariante.
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.
Holger wrote:BTW: unter Android (Tablet mit 1024px, also "normale" Desktop-Ansicht) zeigt bei mir kein Browser den Pfeil im Top-Link-Button an...
Das mit der Auflösung und dem Viewport ist eine verzwickte Sache, da spielt die Pixeldichte eine große Rolle und wie sich das Gerät zu erkennen gibt. Hier ein schönes Info dazu.
Wahrscheinlich hat dein Tablet eine Aüflösung von 1024px x ?px und einem Vieport unter 980px x ?px. Deswegen war da keine Anzeige des rechten Top-Link-Buttons.

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.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Post Reply