What to do to make this code work on mobile

Asked

Viewed 884 times

2

I took this code ready to mount a fake menu off-canvas, it is working perfectly, but when I access by mobile the menu does not appear, what I need to do?

$(".toggle-canvas").click(function () {
$("#menu-canvas").toggleClass('menu-canvas-active');
    removeClass = false;
});

$("#menu-canvas").click(function() {
    removeClass = false;
});
$("html").click(function () {
    if (removeClass) {
        $("#menu-canvas").removeClass('menu-canvas-active');
    }
    removeClass = true;
})

Another question, addClass works on mobile?

jquery mobile

  • Are you sure the troublesome part is the code part you put in? I find it much more likely to be something of CSS that the mobile browser does not support and ends up not rendering the menu. Can you make a minimal example that plays the problem? (full, with html, css and js)

  • Have you tried it with $(document) instead of $("html")?

  • In response to addClass, any jQuery method works on any device, including smartphones.

  • 1

    Should I not add touchend next to the click?

  • Could you tell me if my answer helped? Or if not, what was the problem?

1 answer

1

First of all, your variable removeClass is not defined, this can end up mixing with variables of a higher level or global, so always use var ...

Or thing, avoid creating the events in the "first level" of javascript (it would be the global level), something like:

<script>
var oi = 1;
</script>

Prefer something like:

<script>
(function () {
    var oi = 1;
}());
</script>

So you can avoid mixing the variables

Following up with this something you could do would be to use the event .on of Jquery instead of .click (equivalent to .bind("click",)

The events .on verify changes in the DOM, if a new object is added it automatically applies the event. I say this because I believe you are trying to add the event .click, when the object has not yet been rendered.

An example of .on would be:

$(document).on("click", "SELETOR", function () { console.log("Test..."); });

In your case, your script could work like this:

(function () { //"Isola" as variáveis 
    var removeClass = false;//Define a variável

    //Configura o click para o elemento .toggle-canvas, assim que este "existir"
    $(document).on("click", ".toggle-canvas", function () {
        $("#menu-canvas").toggleClass('menu-canvas-active');
        removeClass = false;
    });

    //Configura o click para o elemento #menu-canvas, assim que este "existir"
    $(document).on("click", "#menu-canvas", function() {
        removeClass = false;
    });

    //Não é necessário .on aqui, pois o document é um dos primeiros elementos "dentro do javascript" a existirem
    $(document).click(function () {
        if (removeClass) {
            $("#menu-canvas").removeClass("menu-canvas-active");
        }

        removeClass = true;
    });
}());

Browser other questions tagged jquery mobile

You are not signed in. Login or sign up in order to post.