Probleme mit Slidepush-Menü und smartphone-Touch

[glupto]

Hallo, ich baue ein fertiges multilevel-pushmenü in meine Seite ein, das soll dann sol aussehen: nachrichtentisch

Zwei Probleme:
1.) das Menü-Icon funktioniert auf dem Smartphone erst nach mehrmaligem Touch. Ich weiß nicht, ob dies mit der js-Steuerung zu tun hat, weil ich leider kaum etwas von javascript verstehe. Vielleicht könnte jemand einen Blick darauf werfen und mir mit fachkundigem Blick sagen, ob dies sein kann und wie ich ggf. vorgehen soll, um das zu korrigieren: (siehe Datei im Anhang sonst zu groß zum Hochladen)

Zweite Frage, ein Teil des Menüs hat zu viele items für eine Seite und das overflow:auto schafft mir zwar eine Scrollleiste, die aber nicht zum Design passt. Etwas wie ein Pfeil-Paar, das stattdessen auftaucht bei overflow:auto und ein scrollen ermöglicht, wäre besser, aber das geht wohl nur mit js. Hat jemand eine Idee, wie das zu lösen wäre. (Die Menüliste, die zu lang ist, z. B. Ausland->Lateinamerika->Südamerika).

Dank und Gruß
glupto

 

[glupto]

Hallo, niemand einen Tipp?

 

[mikdoe]

glupto, pushen ist ok aber bitte nicht mit Vollzitat!
Kannst du den Code irgendwo online stellen? Hilfe funktioniert schneller, wenn man sich das online anschauen kann.

 

[glupto]

Tschuldigung für das Vollzitat. Den Code hatte ich ja notgedrungen in der txt-Datei angehängt, weil sonst zu groß. Der Link zur Seite nachrichtentisch Der Code ist dann auch vom Quelltext aus unter "jquery.multilevelpushmenu_blue.css" und "../jquery.multilevelpushmenu.min.js" zu sehen. Danke, Gruß glupto

 

[mikdoe]

Diesen Link hatte ich so verstanden als wäre das das Ziel aber nicht das Problem. Ich würde erstmal mithilfe der F12 Konsole im Browser alle Fehler beheben und dann weiter sehen. Beispielsweise kommt ein Fehler, wenn ich mit Desktopbrowser mit der Maus über den linken oberen Text fahre.

SCRIPT5007: Die Eigenschaft "innerHTML" eines undefinierten oder Nullverweises kann nicht abgerufen werden.
Datei: collapsed.php, Zeile: 84, Spalte: 1

 

[glupto]

Diesen Link hatte ich so verstanden als wäre das das Ziel aber nicht das Problem. Ich würde erstmal mithilfe der F12 Konsole im Browser alle Fehler beheben und dann weiter sehen. Beispielsweise kommt ein Fehler, wenn ich mit Desktopbrowser mit der Maus über den linken oberen Text fahre.

Hallo, also ich habe die Seite durch den HTML-Validierer geschickt und nur unwesentliche Fehler gefunden, die Du wohl nicht meinst. Der von Dir genannte Fehler wird mir weder mit einem Validierer noch mit firebug angezeigt (welche Unter-Funktion des firebug ist es denn?.

Ich kenne mich wie gesagt nur wenig mit js aus und kann insofern auch nicht einfach so js-Fehler beheben. Ich habe das multilevelpushmenu hierher: und es nur farblich angepasst und mit anderem Content versehen...Multi-Level Push Menu | Codrops

Gruß glupto

 

[kkapsner]

Firebug verpasst manchmal Fehler. Schau' lieber direkt in der Fehlerkonsole nach. Ich hab' leider im neuen Firefox keine Tastenkombination oder Menüpunkt gefunden, so man die aufmachen kann, ABER wenn du die Web Developer Extension installiert hast, sind in deren Menübar rechts drei Icons, die anzeigen, ob du im Quirkmode läufst, CSS- oder JS-Fehler hast. Wenn du auf den JS-Icon klickst, öffnet sich die gute alte Fehlerkonsole.

 

[mikdoe]

Ich hatte den Fehler im IE11 gesehen. Im Firebug wird er auch angezeigt, du musst auf den Reiter "Konsole" klicken und nach unten scrollen, der scrollt nicht selbständig. Und dort findest du:
TypeError: document.getElementById(...) is null
collapsed.php (Zeile 84)

Bilder sagen manchmal mehr, so sieht das dann aus:

 

[glupto]

Hallo, ich habe diese js-Funktion (alle feeds nacheinander durch requests abholen) ohnehin rausnehmen wollen, da sie nicht den gewünschten Effekt hatte: dass die Seite schneller lädt. (jetzt versuche ich stattdessen durch die Umsetzung von pagespeed-Empfehlungen die Seite zu beschleunigen) Insofern trifft auch dieser Fehler nicht auf. Stattdessen "nur" die js - Warnung "Javascript Warning: Syntax-Error: Using //@ to indicate source map URL pragmas is deprecated Use //# instead". Wie ich das korrigiere, weiß ich nicht, da ich kein //@ finde, das ich in //# ändern könnte.

Hast Du denn schon eine Idee zu den Fragen ganz oben?

Gruß
glupto

 

[mikdoe]

Hast Du denn schon eine Idee zu den Fragen ganz oben?

Es macht selten Sinn, von hinten anzufangen. Erst muss der Code fehlerfrei sein. Denn der Browser hört die Javascriptverarbeitung beim ersten Fehler komplett auf.
Hast du den geplanten Umbau bezüglich pagespeed schon gemacht? Kann man sich die neue Seite schon irgendwo anschauen?

 

[glupto]

Es macht selten Sinn, von hinten anzufangen. Erst muss der Code fehlerfrei sein. Denn der Browser hört die Javascriptverarbeitung beim ersten Fehler komplett auf.
Hast du den geplanten Umbau bezüglich pagespeed schon gemacht? Kann man sich die neue Seite schon irgendwo anschauen?

Ja, es ist dieselbe Adresse nachrichtentisch. Alle pagespeed-Vorschläge habe ich noch nicht umgesetzt, es lassen sich wohl auch nicht alle umsetzen, wie ich herausgefunden habe.

Aber der js-Fehler ist jedenfalls raus und nur noch die o. a. Warnung da.

 

[mikdoe]

Da stimmt aber insgesamt etwas mit dem Layout nicht. Auf meinem 10 Zoll Android fehlt links das Menü ganz und die Kacheln sind viel zu breit und reihen sich nicht untereinander sondern starr nebeneinander auf, da passt sich überhaupt nichts dem Display an. Ist das gewollt?

 

[miniA4kuser]

Ich hab' leider im neuen Firefox keine Tastenkombination oder Menüpunkt gefunden, so man die aufmachen kann, ...

Das liegt daran, dass diese durch die Browser-Konsole (selbe Tastenkombination Strg+Umschalt+J) ersetzt wurde. Vorhanden ist die alte Fehlerkonsole schon noch, sonst würde das mit der Web Developer Extension ja auch nicht funktionieren, jedoch nicht sichtbar für den Benutzer. Es ist jedoch möglich diese über about:config und dem Eintrag devtools.errorconsole.enabled > true wenigstens wieder im Menü Entwickler-Werkzeuge > Fehlerkonsole wieder sichtbar zu machen. Leider funktioniert die Tastenkombination nicht mehr, da wie bereits erwähnt von der Browser-Konsole verwendet wird. In wieweit sich diese zwei Module unterscheiden habe ich im Detail aber noch nicht untersucht...

 

[glupto]

Da stimmt aber insgesamt etwas mit dem Layout nicht. Auf meinem 10 Zoll Android fehlt links das Menü ganz und die Kacheln sind viel zu breit und reihen sich nicht untereinander sondern starr nebeneinander auf, da passt sich überhaupt nichts dem Display an. Ist das gewollt?

Das wundert mich, ich habe die Seite mit Responsinator - nachrichtentisch.de/collapsed.php für alle gängigen Formate getestet und da sieht alles ganz in Ordnung aus, nur Datum und Uhrzeit muss ich noch für zwei Formate anpassen. Ein 10 Zoll Android ist da aber auch nicht vorgesehen. Auf dem ipad und ipad mini funktioniert es, das habe ich eben noch mal probiert. Das kann ich mir nicht erklären. Hast Du noch mal einen screenshot?

Ich will auch nicht drängeln, das Problem ist nur, ich wüsste, gern, ob dieses "implementierte" Multilevelpushmenü überhaupt funktioniert, oder ob da eine Macke an sich drin ist, so dass ich mir dann grundsätzlich was anderes überlegen müsste, ich habe schon verschiedene slidemenüs probiert. Ausgangspunkt war halt, dass ich von dem altbackenen jetzigen Design loswollte (siehe Nachrichtentisch aber VOR ALLEM, dass es responsible funktioniert (Anpassung je nach mediaquery auf 1, 2 oder 3-spaltig). Aber dazu muss natürlich das Menü grundsätzlich auch auf dem smartphone funktionieren.

P.S. die Links zu den Untermenüpunkten funktionieren übrigens mit Absicht noch nicht.

 

[mikdoe]

Vergiss es. Ich hatte nicht kapiert, dass die Hauptdomain das alte und /collapsed.php die neue Variante ist. Ich war auf der alten.
Also auf der neuen sieht das bei mir super aus, kein horiz. Scrollbalken und das Menü links klappt perfekt. Ich kann kein Problem feststellen.

 

[glupto]

Vergiss es. Ich hatte nicht kapiert, dass die Hauptdomain das alte und /collapsed.php die neue Variante ist. Ich war auf der alten.
Also auf der neuen sieht das bei mir super aus, kein horiz. Scrollbalken und das Menü links klappt perfekt. Ich kann kein Problem feststellen.

Das Problem ist, dass das Menu-Icon auf meinem Smartphone erst nach mehrmaligen "touch" das Menü öffnet (Smartphone Motorola ist neu) und ich nicht weiß, ob das am js "toucheventhandler"(?) liegt.

Und dann gibt es den vertikalen scrollbalken, wegen des overflow:auto, das bei Langen Menülisten zum Tragen kommt (SIehe Ausland->Lateinamerika->Südamerika, und später auf bei Afrika), da wollte ich fragen, ob es nicht per js etwas eleganteres gibt als den ollen scrollbalken - selbst wenn man den mit css noch aufpeppen würde. Ich habe zum Beispiel auf meiner alten aktuellen Seite einen scrollup-Pfeil, der erst auftaucht, wenn man runtergescrollt hat. So etwas müsste es doch auch für das Auf- und Ab-scrollen bei sehr langen Menülisten geben?

 

[glupto]

Das Problem ist, dass das Menu-Icon auf meinem Smartphone erst nach mehrmaligen "touch" das Menü öffnet (Smartphone Motorola ist neu) und ich nicht weiß, ob das am js "toucheventhandler"(?) liegt.

.... da wollte ich fragen, ob es nicht per js etwas eleganteres gibt als den ollen scrollbalken n?

(abgesehen mal davon, dass ich immer noch nicht weiß, warum ich auf dem smartphone nicht mal den normalen scrollbalken kriege....

Ich habe jetzt auch auf dem ipad eine verlangsamte Reaktion beim Menüicon festgestellt. Hat jemand noch eine Idee zu den obigen Fragen?