Fehler beim Triggern der mobilen Navigation

Hallo!

Bei dieser Website: http://www.lunge-ktn.at gibt es ein Problem beim Triggern der mobilen Navigation. Ich habe eine Contao3 Version zum Update auf Contao4 auf einen neuen Server geholt und nachdem mit dem bisher genutzten dk_mmenu, das ich händisch installiert habe, das Problem auftrat, habe ich es mit mobile-menu probiert. Dasselbe Problem! Komisch ist, ich habe zuvor eine von der Struktur idente Website erfolgreich auf die gleiche Weise migriert, dort funktioniert alles. Mit meinen Technik-Kentnissen kann ich leider den Fehler nicht genau genug lokalisieren trotz Konsole etc.

Kann mir bitte jemand sagen, wo genau ich was ändern kann, um das Problem zu beheben?

Die Domain habe ich erst vorhin transferiert, damit ich die Seite online habe. Sollte sie also, wenn jemand sie anschaut, noch auf Contao3 laufen, dann ist der Transfer noch nicht abgeschlossen...

http://www.lunge-ktn.at

Bitte um Eure Hilfe!
Danke!!
anx

Nimm mal den Link aus dem Button raus. Also nur das IMG dort lassen.

HTML-Code:

---

<div class="mobilnavbutton">
  <!-- <a href="#mobilnav"> -->
    <img src="files/Layout/Menu_mobil.gif" alt="Navigation einblenden" width="50" height="50">
  <!-- </a> -->
</div>

---

Danke Andreas, das wars. Vielen Dank!

BTW: Das IMG kannst du dir auch sparen. Formatiere den Button einfach mit CSS

HTML-Code:

---

.mobilnavbutton {
  background-image: url(files/Layout/Menu_mobil.gif);
  background-size: cover;
  width: 50px;
  height: 50px;
  cursor: pointer;
}

---

Den Text für Screenreader kannst du ins TITLE-Attribute setzen.

Ich habe bei dieser Website ein ähnliches Problem. Nur das der Trigger nur auf der Startseite nicht funktioniert.
Auf den folgenden Seiten funktioniert alles einwandfrei. Ich habe nur 1 Layout. Von daher koennten also keine Unterschiede sein.

Hinweis, etwas später... ;-)
Ich hab die Ursache, es ist ein Javascript was ich eingebunden habe um Links via "Smooth-Scroll" anzuspringen:

HTML-Code:

---

<script type="text/javascript">
/* Scrollt zum entsprechenden Anker/ID */
$(document).ready(function(){
    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: (target.offset().top - 0)
                }, 500);
                return false;
            }
        }
    });
});
</script>

---

@Andreas: Wenn ich den Link beim Trigger rausnehme, geht gar nichts mehr.
Nun weiss ich aber nicht wie ich die beiden miteinander verträglich mache... :-/

Zitat:

---

Zitat von Andreas

Nimm mal den Link aus dem Button raus. Also nur das IMG dort lassen.

HTML-Code:

---

<div class="mobilnavbutton">
  <!-- <a href="#mobilnav"> -->
    <img src="files/Layout/Menu_mobil.gif" alt="Navigation einblenden" width="50" height="50">
  <!-- </a> -->
</div>

---

---

Zitat:

---

Zitat von Twitt

Hinweis, etwas später... ;-)
Ich hab die Ursache, es ist ein Javascript was ich eingebunden habe um Links via "Smooth-Scroll" anzuspringen:

---

Ich hatte ein ähnliches Problem mit dem back2top-Script. Folgende Lösung von Kamil hat bei mir geholfen:

Zitat:

---

This is likely caused by the transform CSS rule applied to the wrapper element – see https://stackoverflow.com/a/15256339. I suggest that you disable the off-canvas effect for that case and it should be back to normal.

---

@Twitt: Warum das jetzt auf der Startseite nicht funktioniert, weiß ich auf Anhieb auch nicht.

Schau dir bitte nochmal die Anleitung an https://codefog.pl/extension/mobile-menu.html. Auch die Bilder, hauptsächlich Nr. 3. Und lies den Text, oder lass ihn von Google übersetzen. Dort ist eigentlich alles beschrieben und dort ist auch kein Link im Trigger. Das JS der Erweiterung setzt ein Click-Event auf das HTML, was in dem Feld "Trigger content" steht, bzw. baut einen Wrapper da drum herum, der das Event bekommt. Wenn da noch andere JS-Erweiterungen sind, welche nach irgendwelchen Links suchen und dort ihre eigenen Events aufsetzten, könnte das nicht miteinander harmonieren. Also mach es mal so, wie in der Anleitung.

ps Schmeiß mal das JS Image-Poyfill für die responsiven Bilder raus aus dem Layout, das braucht man nicht. Das j_mediaelement würde ich auch nicht einsetzen. Videos und Audios werden heutzutage mit dem onboard HTML5-Videoplayer der Browser angezeigt. Und: Warum ist diese Seite so schnell? Was ist das für ein Hoster?

Danke euch fuer die Hinweise.

Andreas: ich schau mir die Doku bei codefog an, obwohl ich das Mobilemenu von Dirk Klemmt noch benutze. Ich denke aber das spielt ja für den Trigger keine Rolle.
Es scheint wirklich nur an den JS für das Anspringen via Smooth-Scroll der Artikel zu liegen.

Uff, das ist mir neu, dass man das JS Image-Polyfill auslassen kann. Dachte das wäre notwendig für die Responsive-Images?. Das «j_mediaelement» war irrtümlicherweise noch angehakt, kommt aber auch raus.


Geschwindigkeit der Site
Die Site läuft bei hostpoint.ch und es wurde noch nicht mal alles an Optimierung ausgereitzt. Es ist auch ein normales Hosting, also kein spezieller Server o. ä. Die gzip-Komprimierung in der htaccess-Datei wurde aktiviert. Ausserdem hab ich alles rausgeschmissen (bezw. bin noch dran) was irgendwie Traffic frisst.

Die JS-Dateien hab ich noch nicht zusammengefasst, wie das bei Rocksolid auf deren Blog steht. Hab aber auch nicht getestet ob ich da noch viel Speed raushole. Vielleicht hat hier jemand Erfahrungen damit?

Zitat:

---

Zitat von Andreas

@Twitt: Warum das jetzt auf der Startseite nicht funktioniert, weiß ich auf Anhieb auch nicht.
Schau dir bitte nochmal die Anleitung an https://codefog.pl/extension/mobile-menu.html. Auch die Bilder, hauptsächlich Nr. 3. Und lies den Text, oder lass ihn von Google übersetzen. Dort ist eigentlich alles beschrieben und dort ist auch kein Link im Trigger. Das JS der Erweiterung setzt ein Click-Event auf das HTML, was in dem Feld "Trigger content" steht, bzw. baut einen Wrapper da drum herum, der das Event bekommt. Wenn da noch andere JS-Erweiterungen sind, welche nach irgendwelchen Links suchen und dort ihre eigenen Events aufsetzten, könnte das nicht miteinander harmonieren. Also mach es mal so, wie in der Anleitung.

ps Schmeiß mal das JS Image-Poyfill für die responsiven Bilder raus aus dem Layout, das braucht man nicht. Das j_mediaelement würde ich auch nicht einsetzen. Videos und Audios werden heutzutage mit dem onboard HTML5-Videoplayer der Browser angezeigt. Und: Warum ist diese Seite so schnell? Was ist das für ein Hoster?

---

dk_mmenu: Sorry, sah nur "mobile Navigation" im Threadtitel, da bin ich davon ausgegangen, dass es sich um mobile_menu handelt. Wenn mmenu da auf einem Link als Trigger bestehen sollte, kannst du ihn natürlich erstmal nicht so einfach gegen was anderes austauschen. Und ja, der technische Hintergrund bleibt natürlich der gleiche. Mehrere Plugins setzen einen Eventlistener auf das gleiche Element.

Polyfill: Ja, da stimmt der Hilfe- bzw. Hinweistext nicht. Ist nur für Uraltbrowser (IE7, 8? keine Ahnung), welche IMHO nicht wirklich diesbezüglich unterstützt werden sollten.

gzip: Die gzip-Aktivierung in der htaccess müsstest du dir eigentlich sparen können, da auf dem Server mod_deflate aktiviert sein müsste, was dafür sorgt, dass die Dateien automatisch gzip-komprimiert gesendet werden. Das solltest du auch mit den Devtools im Antwortheader erkennen können.

Edit: Ich hatte letztens mal einen Test mit ner 50MB JS-Datei gemacht und war überrascht, wie schnell die bei mir war, das konnte eigentlich nicht sein, bis ich dann entdeckte, dass er nur ca 200KB gesendet hatte. In der Datei stand nur "Lorem ipsum lorem ..." :), was man natürlich leicht komprimieren kann. Gzip in der htaccess war nicht eingerichtet, mache ich nie, ging einfach per mod_deflate.