JavaScript jquery $(...).on('tap', $(...).toggle()); auf dem iPhone

M.E. · 15. Juli 2016

Hallo zusammen,

Ich habe hier ein CSS3 basiertes Popup (Tooltip), das leider nur auf dem iPhone nicht funktioniert.

Im CSS3 verwende ich

HTML:

.popup-menu:focus .popup-menu-content {
visibility: visible; 
}

Um das Popup sichtbar zu machen, wenn auf den Text geklickt oder getoucht wird. Das funktioniert auf allen Geraeten wunderbar, bis auf iOS und Safari.

Auf dem iPhone muss ich das also irgendwie anders loesen, da dort sonst bei einem Touch garnichts passiert.
Ich dachte da an jQuery mit on('tap' ...) :\

Code:

<script>$("#popup-link-123").on("tap", $("#popup-link-123").toggle(10));</script>

Jetzt muss ich im CSS display: none: setzten, weil toggle() soweit ich weiss diese Eigenschaft veraendert.

Jetzt tut sich zwar etwas auf dem iPhone bei einem Touch, aber es ist so gut wie nicht benutzbar. Das Popup flackert kurz auf und in den meisten Faellen klicke ich auch schon auf den Link der im Popup enthalten ist, bevor ich es ueberhaupt richtig sehen kann.

Ich habe versucht den Parameter von toggle(X) anzupassen, aber das hat keinen Effekt auf die Benutzbarkeit. Ausserdem habe ich es auch schon mit ontouch, ontouchmove und ontouchend versucht. Ohne Erfolg.

Wie macht man das nun also richtig? Kann ja eigentlich nicht so schwer sein

Danke fuer jeden Tipp.

MfG

failormooNN · 15. Juli 2016

1. Lösungsansatz

Versuch mal dem zu klickendem Element ein leeres onclick="" zu geben.

2. Lösungsansatz

Füge im Head folgendes Script ein:

HTML:

<script>document.addEventListener("touchstart", function(){}, true);</script>

Im CSS folgenden Zeile:

HTML:

.popup-menu:hover, .popup-menu:active {
-webkit-user-select: none;
-webkit-touch-callout: none
}

Irgendwie so.

Dann sollte auch das funktionieren, geb Dir aber keine Garantie.

HTML:

.popup-menu:hover .popup-menu-content,
.popup-menu:active .popup-menu-content {
visibility: visible; 
}

Beste Grüsse
failor

Teisi · 16. Juli 2016

Guck mal hier, vielleicht hilft dir das weiter:

http://koen.kivits.com/articles/pure-css-menu/

unter Cons meint er:
... add onclick handler to the top element ... for Safari

M.E. · 16. Juli 2016

Super, vielen Dank

Das

HTML:

onclick=""

auf das anzuklickende Element ist die Loesung.

Suche

JavaScript jquery $(...).on('tap', $(...).toggle()); auf dem iPhone

M.E.

Lt. Commander

failormooNN

Lieutenant

Teisi

Lt. Junior Grade

M.E.

Lt. Commander

Ähnliche Themen