Reiter zurückfahren / mobile Ansicht

Hallo Contao Gemeinde ,

Ich habe für eine Website zwei "Reiter" mit Position:fixed erstellt. Wenn man mit der Maus drüber fährt, fährt der Reiter raus. Wenn die Maus wegbewegt wird fährt dementsprechend zurück. Soweit so gut.

Wenn ich nun in der mobilen Ansicht mit einem Android Gerät (Samsung Note 3) die Seite teste funktioniert die Geschichte soweit auch. Um die Reiter zurückzufahren muss ich einfach eine andere Stelle auf der Seite antippen und es fährt zurück. Mit einem iOS gerät funktioniert das Zurückfahren leider nicht. Getestet mit IPhone 5S und einem Ipad.

Hätte jemand eine Lösung für mich?

Link auf Website

Du benutzt zum rausfahren auschliesslich :hover .... das gibt es auf mobilen Geräten nicht (auch wenn es teilweise unter Android funktioniert).

So etwas löse ich mittels modernizer (zur Feature-Erkennung) ... könnte z.B. so aussehen (jQuery):

Code:

---

$(document).ready(function () {
    if((Modernizr.touch) || (window.navigator.msPointerEnabled)) {
      /* Funktionen für touch z.B.: $('#id').touch(function{$('html').addClass('showinfo');}); */       
    } else {
      /* Funktionen wenn non-touch z.B.: $('#id').mouseover(function{$('html').addClass('showinfo');}); */
    }
});

---

Dazu folgende Infos:

• Feature-Erkennung mittels: http://modernizr.com/
• Touch-Events mittels: http://eightmedia.github.io/hammer.js/
• das window.navigator.msPointerEnabled ist für Windows8-Touchgeräte, weil Modernizr diese nicht korrekt erkennt

Danke Bas.
Ich werde mich durchlesen.

Gesendet von meinem SM-N9005 mit Tapatalk