Hoverfunktion funktioniert ab gewisser Fensterbreite nicht mehr

  • Hey zusammen,


    ich habe eine Funktion erstellt, welche wenn man mit der Maus auf ein Zeichen fährt ein Container eingeblendet wird. Das Einblenden funktioniert jedoch nur bis ca. 786 px (Browserbreite) und nur bei PCS, bzw. Geräten mit denen man hovern kann.


    Ich habe mir nun überlegt, wie ich dies für Handys, bzw. Endgeräten machen kann, dass sie auch den Container einblenden können. Dazu habe ich mir gedacht einfach für diese Gruppe anstatt mouseover/mouseout click zu nehmen. Sollte ja bei Handys, IPads usw.. funktionieren.


    Das Problem ist jedoch, dass der Container, wie bereits gesagt, ab einer Browserfenstergröße unter 786 px nicht mehr eingeblendet wird obwohl es eigentlich sein müsste. Ich verstehe nicht warum dieser Container nicht eingeblendet wird.


    Es handelt sich um einen Shop.


    Woran kann es liegen?


    Grüße,

    Stef

  • hast du vieleicht mal einen Link oder so ?


    ich habe eine Funktion erstellt, welche wenn man mit der Maus auf ein Zeichen fährt ein Container eingeblendet wird. Das Einblenden funktioniert jedoch nur bis ca. 786 px (Browserbreite) und nur bei PCS, bzw. Geräten mit denen man hovern kann.

    Ohne ein nerviges ( anders ) Script sehe ich da kein Grund zu warum das so sein sollte


    Ich habe mir nun überlegt, wie ich dies für Handys, bzw. Endgeräten machen kann, dass sie auch den Container einblenden können. Dazu habe ich mir gedacht einfach für diese Gruppe anstatt mouseover/mouseout click zu nehmen. Sollte ja bei Handys, IPads usw.. funktionieren.

    Ja click ( touch ), oder vieleicht auchh 2 finger touch und so weiter. Ein Handy kann da ja auch mehrere Finger erkennen.

    Hier mal ein Link falls du ihn noch nicht kennen tust

    https://www.html5rocks.com/de/mobile/touch/


    Das Problem ist jedoch, dass der Container, wie bereits gesagt, ab einer Browserfenstergröße unter 786 px nicht mehr eingeblendet wird obwohl es eigentlich sein müsste. Ich verstehe nicht warum dieser Container nicht eingeblendet wird.

    hast du am Anfang nicht gesagt das es bis 786px funktioniert ?


    Oder ich habe es falsch verstanden , dann sorry

  • Hey,

    Ohne ein nerviges ( anders ) Script sehe ich da kein Grund zu warum das so sein sollte

    Wie meinst du das?

    Zitat

    hast du am Anfang nicht gesagt das es bis 786px funktioniert ?


    Oder ich habe es falsch verstanden , dann sorry


    Da hast du mich falsch verstanden oder ich habe mich zu ungenau ausgedrückt. Wenn das Browserfenster größer als 786px ist wird der Container noch eingeblendet. Wenn das Browserfenster jedoch kleiner als 786 px ist nicht mehr.


    Ich weiß nicht warum. Die seitliche Scrollbar geht wenn man dort auf die Infobuttons geht ein klein bisschen runter aber mehr passiert da auch nicht.

    Ich bin mir auch ganz sicher, dass der Container nicht ausgeblendet wird.


    Grüße,

    Stef

  • Bei mir (Opera auf PC) funktioniert es einwandfrei: Bei breitem Fenster ist die Nav sichtbar, bei schmalem nur das Burger-Symbol und die Nav öffnet sich, wenn man darauf klickt.

    Auf Samsung S4 funktioniert es auch: Touch auf Burger-Symbol öffnet die Nav, sowohl im Android-Browser als auch in Opera.

  • Ich dachte die ganze Zeit es geht um de Container der beim hovern der blauen Info Icons eingeblendet wird.

    Das wahr wohl falsch oder ?


    Aber ich habe auch Opera und Avant-Browser , da ist die Nav auch alles ok. Kann da nix erkennen was jetzt unschön ist

  • Hey,


    es geht bei dem Problem nicht um die Navigation. Es geht wie Basti geschrieben hat um die blauen Info-Icons neben den Optionen. Wenn man mit der Maus auf diese geht öffnet sich ein Container mit Informationen zu dieser Option.


    Dies funktioniert aber bisher nur mit mouseover/mouseout und bis einer Bildschirmgröße (wenn eine Maus vorhanden ist) von größer als 768 px.


    Wenn die Bildschirmgröße kleiner ist ändert sich der Seitenaufbau und der rechte Container wo die Formularfelder drin sind brechen dann nach unten ab und benutzt 100% width und nicht wie vorher 50%. Somit ist die linke Seite nicht mehr vorhanden, die für das Einblenden eigentlich erforderlich ist.


    Ich habe eben noch mal getestet und es funktioniert mit dem mouseover/mouseout auch bei kleineren Browserfenstergrößen. Nur das Problem ist dabei, dass der Container oberhalb dem Formular dann angezeigt wird und wenn man auf den Infobutton fährt dann verschiebt sich alles nach unten.


    Dort wollte ich dann einfach für Handys/Ipads ein Click Event intialisieren, dass sie auf den Infobutton clicken können und sich dann oberhalb der Container öffnet.


    Dazu habe ich bereits nach Möglichkeiten gesucht wie ich die Browserfensterbreite erfassen kann. Dazu gibt es window.innerWidth welche wie ich gelesen habe zuverlässige Werte liefert. Dann habe ich ein If/Else Statement bereits erstellt mit Überprüfung der Fenstergrößen. Jedoch funktioniert dann entweder garnichts mehr oder dann kein Click.


    Grüße,

    Stef

  • Wenn ich das teste, stoße ich auf folgende Probleme:

    • Bei breitem Fenster und wenn ich mit der Scrollposition ganz am Anfang bin, ist das Infofenster nicht sichtbar, weil es weiter unten liegt, so dass ich zunächst dachte, das Hover funktioniert nicht.
    • Bei schmalem Fenster flimmert es beim Hover.

    Ich empfehle, ein Plugin wie Tooltipster einzusetzen. Dieses legt die Lage des Infofensters intelligent fest, so dass es unabhänig von der Scrollpositon und der Lage des Infobuttons immer sichtbar ist und kein Flimmern auftritt. Trigger durch Hover oder Click/Touch ist konfigurierbar.

  • Hey,


    vielen Dank für den Tipp dies mit Tooltipster zu machen. Habe ich jetzt auch implementiert und es funktioniert alles bis auf 2 Sachen.


    Dies ist mein Script dazu:

    So sollte es ja eigentlich auch auf dem Handy mittels draufdrücken funktionieren. Denn touchstart & touchleave sind für das Handy da.

    Bei mir ist der Fall, dass sich trotz mehrfachen drücken auf das Bild (habe es extra größer gemacht, damit man es nicht verfehlt) entweder nichts öffnet oder erst nach mehreren Drücken sich es öffnet. Und das bei jedem. Desweitern passt sich die Breite des Infocontainers nicht dem Endgerätbildschirm an.


    Ich habe bereits gegoogelt aber dazu noch nichts hilfreiches gefunden.


    Weißt du wie man das beheben kann?


    EDIT: Das Problem mit der Breite habe ich gefixt. Da waren die Bilder zu groß.


    Grüße,

    Stef

  • Ich habe es getestet und was ich zunächst vermutet hatte, hat sich bestätigt: Durch touchstart wird der Tooltipp geöffnet und durch touchleave geschlossen. Außerdem ist eine Verzögerung für das Öffnen drin. D. h. man muss das Element berühren und halten, um den Tooltipp zu Gesicht zu bekommen. Dann entsteht jedoch die Komplikation, dass durch langes Berühren auch das Kontextmenü geöffnet wird. Man müsste mal in den Optionen suchen, ob man das unterdrücken kann.

    Wenn man für Öffnen und Schließen beide Male tap verwendet, geht es.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!