11540 sujets

JavaScript, DOM et API Web HTML5

Probleme curieux sur ios

Bonsoir,
Je viens vers vous car je suis confronter a un probléme curieux sur ios (tester sur iphone 4).
Pour activer le menu sur mobile on click sur un bouton, le menu s'ouvre et un overlay apparait au dessus de la page, jusque la tout fonctionne parfaitement,pour refermer le menu on click sur cette overlay, et la sa fonctionne partout (desktop, android) mais pas sur ios et je n'est aucune idée de pourquoi, j'espere que vous pourrez m'aider a y voir plus clair, car la je ne comprend vraiment pas...

html:

<body>
   <div class="menu-ctn" id="menu-ctn">
       <nav class="menu">
           <ul>
                <li>...</li>
                <li>...</li>
                <li>...</li>
           </ul>           
       </nav>
   </div>
   <div class="overlay" id="overlay">
   </div>
</body>


css:

.menu-ctn {
    position: fixed;
    top: 0;
    left: -255px;
    z-index: 1000;
    width: 255px;
    height: 100%;
}

.menu-ctn.active {
    left:0;
}

.overlay {
position: fixed;
        top:0;
        left:0;
        width:100%;
            height:100%;
    background-color:    rgba(0,0,0,0.8);
}

le css du menu n'est que de la "déco"
js (une fois jquery ready):


$("#menu-ctn").click(function () {
        
        $("#menu-ctn").toggleClass("active");  //ajout de la classe active au menu
        $("#overlay").toggleClass("over-menu");  // ajout de la classe menu a overlay
        
    });

$("body").on("click", "#overlay.over-menu", function(e) {
        $("#menu-ctn").toggleClass("active");
        $("#overlay").toggleClass("over-menu");
        });


A savoir que j'ajoute la classe menu a overlay car j'utilise overlay pour différente chose, et du coup cette classe me permet de reperer que ces le menu qui est activer.
Voila, donc sa marche correctement partout sauf sur ios... sur ce dernier le menu s'ouvre sans probleme mais on ne peut pas le fermer Smiley decu

J'espere que quelqu'un aura une piste, car la je cherche ais je ne trouve pas du tout Smiley decu , merci d'avance pour votre aide Smiley smile
Modifié par rif5 (27 Mar 2015 - 18:46)
merci pour ta suggestion Smiley cligne

Alors j'utilise la version jquery 1.11.2, je n'utilise pas jquery mobile.

Du coup aprés différents essai le probléme semble venir de l'evenement "click" en utilisant le gestionnaire d'evenement .on().

Effectivement en utilsant :

$("#overlay").click(function() {
    $("#menu-ctn").toggleClass("active");
    });


la sa fonctionne, mais sa ne me permet pas de cibler l'overlay avec la classe .menu rajouter dynamiquement...

Autre chose, qui montre que c'est le "click" qui pose probléme, si dans mon premier code, je remplace click par touchstart, sa fonctionne correctement, mais j'aimerais savoir pourquoi avec click sa fonctionne partout sauf sur ios...

Si quelqu'un a une piste du coup avec ces info complémentaire...
Merci a vous Smiley smile
Re,
a écrit :

sa fonctionne, mais sa ne me permet pas de cibler l'overlay avec la classe .menu rajouter dynamiquement...


On part du principe que dans ce code tu génère du dom dynamiquement en lui affectant des events.
Il y a plusieurs façon de le faire je reste sur l'exemple le plus simple.

ex:

var monElementDynamic = $('<div id="monid" onclick="mafunction();" onmouseover="monautrefunction()">...</div>');

$("body").html(monElementDynamic); // si on veux attacher l'élément directement dans body


Si dans ton code tu appel $('#monid'). et que celui n'est pas été créer il ne sera pas ciblé, regarde comment j'ai affecter l’événement il est dynamique dès la création de l’élément html.

J'ai cru voir un hack CSS il faut un ajout css sur l'élément cliquable.

{
cursor:pointer;
}
A tester ... Smiley decu
Sujet clos
Aller à