Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Stuart McPherson
Stuart McPherson
15,939 Points
Posted by Stuart McPherson
Stuart McPherson
15,939 Points

Javascript on click works on desktop but not on mobile

I have a menu for mobile where when the button is clicked the menu will appear.

Using the on click function. It works fine at desktop but doesn't work on mobile (my Samsung Galaxy S5)

I've tried changing click for touchstart and experience the same thing. Works at desktop but not at mobile.

Tried putting in click and touchstart but seems to have a double click effect. As the menu works by sliding in. With both settings in it kind of slides left and right a little bit but then stops.

Any help on how to get it working on mobile and desktop?

menu.js

$(document).ready(function () {
        $(".menuIcon").on('click touchstart', function(){
      $('.menu-main-menu-container').toggleClass('anim');
    });

        $('.animation').click(function(){
            $('.anim').toggleClass('reverse-animation');
        })
});

index.html

<div class="mobileMenu">
            <a class="menuIcon">MobileMenuButton</a> 

            <div class="overlay">
            <div class="menu-main-menu-container"><ul id="mobileMenu" class="menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-27"><a href="/">Home</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-26"><a href="about/">About</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="/latest-news/">News</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><a href="/events/">Events</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="/activities/">Activities</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="/gallery/">Gallery</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="/members/">Members</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="/contact/">Contact</a></li>
</ul></div>             </div>
        </div>

1 Answer

Eric Butler
Eric Butler
33,512 Points
Eric Butler
Eric Butler
33,512 Points

Hi Stuart, Not sure I have the exact answer for you but maybe I can help. You definitely don't want to have both a "click" and "touchstart" event in the same event handler, because every touchscreen treats a "tap" as a pseudo-"click" event, plus will also treat it as a "touchstart" event, so you will wind up firing off 2 events every time you tap that .menuIcon element. And since both events trigger a "toggle" effect, your single tap (firing twice) will toggle the class on and then off at the same time -- making it look like nothing happened.

Since it sounds like you want this menu to work on desktop and mobile, I'd suggest not using "touchstart" at all, since no non-touchscreen displays recognize it, and all touchscreens interpret taps as "click" events. So use "click" and nothing else.

Now, as to why it wasn't registering when you only had $(".menuIcon").on("click", function () { $(".menu-main-menu-container").toggleClass("anim"); });, that's a bit of a puzzle, because it seems correctly written. I'm guessing that the event is correctly firing, but something about what you're asking it to do (toggle the "anim" class) is not doing what you expect. I suggest you change the function to something like:

$(".menuIcon").on("click", function () {
  alert('You clicked the menu icon');
});

and seeing if your phone is at least recognizing the click correctly: if the alert appears, the event is firing correctly. I bet it does. Once you know that, at least you can get past wondering what's wrong with the event handler (it might not be wrong at all) and start troubleshooting where the problem really is. It may very well be a CSS issue, where the CSS for .anim works on your desktop/browser but not your phone (I'm guessing here of course but it's worth checking). If you posted your CSS it might help troubleshooting.

Good luck to you! Let me know what you find out.

Stuart McPherson
Stuart McPherson
15,939 Points
Stuart McPherson
Stuart McPherson
15,939 Points

Hi Eric,

Thanks for helping out. Okay I've left out touchstart, so its just click.

Tried your click function with just the alert inside. Worked at desktop. But not on mobile.

Switched back to my original function.

Opened my website with chrome instead of the default internet app on my Samsung Galaxy s5 and the menu worked fine!

Worked on friends iPhone 6S.

Tried testing on browser stack. Working on desktop browsers. For mobiles it worked on: Samsung galaxy S5, S6, S7 (chrome and firefox) iPhone 7 (not sure if browserstack was working properly on other iPhone versions, as friends 6s worked in real life but not in browserstack)

styles.scss

.menuIcon {

    cursor: pointer;

    &:before, &:after {
      content: '';
      left: 0;
      height: 4px;
      width: 35px;
      background: #ffffff;
    }
  }

 header { 
  .overlay {
    width: 100%;
    height: 326px;
    position: absolute;
    overflow: hidden;
    z-index: 1;

    &:before {
      top: -8px;
    }

    &:after {
      bottom: -8px;
    }

    .menu-main-menu-container {
      position: absolute;
      top: -99%;
      height: 100%;
      background: #ffa411;
      left: 0;
      width: 100%;
      transition: all 0.5s ease;

      &.anim {
        left: 0;
        top: 0;
        animation: menu-anim 1.5s 1 ease-out normal;
        width: 100%;
        transition: all 0.5s ease;

        &.reverse-anim {
          left: 0;
          top: 0;
          animation: menu-anim 1.5s 1 ease-out reverse;
          width: 100%;
          transition: all 0.5s ease;
        }
      }

      ul {
        width: 100%;
        text-align: center;
        padding-left: 0;
        margin-left: -10px;
        font-weight: 800;

        li {
          margin: 10px 0;

          a {
            text-decoration: none;
            color: white;
            position: relative;
            display: inline-block;
            overflow: hidden;

            &:after {
              display: block;
              border-radius: 2px;
              content: ''; 
              left: 0;
              bottom: -10px;
              height: 5px;
              background: #ffffff;
              transform: translateX(-101%);
            }

            &:hover {
              text-decoration: none;

              &:after {
                animation: border-anim 0.5s 1 ease normal;
                transform: translateX(0);
              }
            }
          }

          @-webkit-keyframes border-anim {
            0% {
              transform: translateX(-100%);
            }

            100% {
              transform: translateX(0);
            }
          }

        }
      }
    }

    @-webkit-keyframes menu-anim {

      0% {
        left: 0;
        top: -99%;
        width: 100%;
      }

      33% {
        left: -99.5%;
        top: -99%;
        width: 100%;
      }

      66% {
        left: -99.5%;
        top: 0;
        width: 100%;
      }

      100% {
        top: 0;
        left: 0;
        width: 100%;
      }
    }
  }
}

Menu was based on the example here: http://codepen.io/sacsooo/full/MwxLqK/

Which works on my default internet app. Implementing this into my website it doesn't work on my default internet app but does on chrome.

Thanks, Stuart