troubles with jquery on mobile

Discussion in 'JavaScript' started by metatad, Nov 14, 2019.

0
  1. #1
    I have this code:
    $(".trem").click(function(){
    var showSlide = $(this).attr("id");
    if (showSlide == "mur_tm") {
    $("#mur_hm").slideToggle(1000);
    }
    });
    It works fine on desktop, but don't work on mobile. The showSlide variable it's correct (I check it both with an alert and with console.log), but the slideToggle don't work. The inspector don't retrieve any error.
    So, which can be the problem? And how I can solve it?
    Thanks for help
     
    metatad, Nov 14, 2019 IP
  2. hdewantara

    hdewantara Well-Known Member

    Messages:
    538
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #2
    Hi Metatad.
    It's hard to say why without seeing the HTML, CSS. Have an URL link to the page / demo page?
     
    hdewantara, Nov 14, 2019 IP
  3. metatad

    metatad Greenhorn

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #3
    Look at http://www.slideworld.it/defdef/
    On mobile, try to tap on any [leggi tutto]; the related hidden div don't slide...
     
    metatad, Nov 14, 2019 IP
  4. hdewantara

    hdewantara Well-Known Member

    Messages:
    538
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #4
    It seems that the [leggi tutto] which relates to a jQuery in post #1 is the one under "Siamo la prima società di consulenza specializzata in Marketing Microrelazionale." paragraph. It revealed itself only when I turned my Firefox browser to emulate iPad 768 x 1024 portrait mode.

    And if you look closely at this element: 
    
<span class="salvia2 trem" id="mur_tm">[leggi tutto]</span>
    HTML:
    with Firefox Inspector, it actually has 2 event handlers hooked to it:
    defined in line #1625 - ...:
    
$("#mur_tm").click(function(){
    $('#mur_hm').css({"display": "block"});
    $('#mur_hm').addClass('slideDown');
    //slideDown("mur_hm");
});
    Code (JavaScript):
    and in line #1631 - ...:
    
$(".trem").click(function(){
          //e.preventDefault();
        var showSlide = $(this).attr("id");
        if (showSlide == "openm") {
            ...
        } else if (showSlide == "mur_tm") {
        //alert("ok "+showSlide)
            slideDown("mur_hm");
            //$("#mur_hm").addClass('active');
            //$("#mur_hm").slideDown(350);
            $("#mur_hm").slideToggle(1000);
    Code (JavaScript):
    So I think they conflicts. Try to remove the 1st code block and use only the 2nd.

    Sidenote: I found a couple of HTML elements with same id="mur_tm". That's not good. Perhaps you want to also validate this page to https://validator.w3.org/ before developing further?
     
    hdewantara, Nov 14, 2019 IP