CODEWITHSUNDEEP
javascriptjqueryhtmlcss
hj8ag
hj8ag

Reputation: 305

Enabling/Disabling touchmove on click

I'm currently building a site with a really simple overlay effect - I have a 'hamburger' (.mobilemenu) menu icon, which when clicked toggles a pseudo class on my navigation overlay (.mobile-nav). I'm looking to add some code which also disables touchmove on the initial click and when (.mobilemenu) is clicked again, reinstates the default behaviour.

This is my code as it stands:

jQuery('.mobilemenu').click(function(e) {
    jQuery(this).toggleClass('is-active');
    jQuery('.mobile-nav').toggleClass('active');


    e.preventDefault();
});

I tried the following:

jQuery('.mobilemenu').click(function(e) {
    jQuery(this).toggleClass('is-active');
    jQuery('.mobile-nav').toggleClass('active');
    if('.mobile-nav').hasClass('active') {
        $(body).on('touchmove', function(e) {
        e.preventDefault();
        }};

    e.preventDefault();
});

This obviously isn't working!

Frankly Javascript/JQuery is quite new to me, so I'm sure the syntax is incorrect here. Could I potentially toggle a body class that has touch move disabled? Or do I have to somehow rewrite the code and use bind?

EDIT: On the suggestion of @John R I've changed the syntax of my code slightly - Here is a fiddle: JS fiddle

My code now looks as follows:

jQuery('.mobilemenu').click(function(e) {
  jQuery(this).toggleClass('is-active');
   jQuery('.mobile-nav').toggleClass('active');
     if(jQuery('.mobile-nav').hasClass('active')) {
     $(body).on('touchmove', function(e) {
     e.preventDefault();
  }};

e.preventDefault();
});

However this seems to have killed the overlay completely! I'm guessing that though the line if(jQuery('.mobile-nav').hasClass('active')) { etc. is now correct, the following bits might not be?

EDIT 2: So after a bit of playing around I've updated the syntax, the overlay is again working but I can still scroll the body of the page behind the overlay on iPhone: http://jsfiddle.net/jameshenry/bzau0jaz/1/ - If anybody has any ideas I'd really appreciate that!

jQuery('.mobilemenu').click(function(e) {
    jQuery(this).toggleClass('is-active');
    jQuery('.mobile-nav').toggleClass('active');

    if(jQuery('.mobile-nav').hasClass('active')) {
        $(body).on('touchmove', function(e){
            e.preventDefault()}
                  )};
});

EDIT 3: After playing around with the structure and syntax a little more I've finally got the 'touchmove, false' working when clicked. The only problem is it doesn't toggle so scrolling is permanently disabled! 

jQuery('.mobilemenu').click(function(e) {
    jQuery(this).toggleClass('is-active');
    jQuery('.mobile-nav').toggleClass('active');

    if(jQuery('.mobile-nav').hasClass('active')) {
        $('body').on('touchmove', false);
    };
});

I'm thinking an Else statement is the way to go, but I've tried adding the following:

jQuery('.mobilemenu').click(function(e) {
    jQuery(this).toggleClass('is-active');
    jQuery('.mobile-nav').toggleClass('active');

    if(jQuery('.mobile-nav').hasClass('active')) {
        $('body').on('touchmove', false);
    };
    else { $('body').on('touchmove', true);};
});

But that just seems to stop the overlay working - is there a way to switch 'touchmove' back on when closed? Here is a fiddle http://jsfiddle.net/jameshenry/bzau0jaz/2/

Upvotes: 3

Views: 1960

Answers (3)

hj8ag
hj8ag

Reputation: 305

Ok the solution (after lots of trial and error and way too many hours spent on this!) is really simple - binding using .on() and unbinding via .off - Here is the final jQuery code:

jQuery('.mobilemenu').click(function(e) {
    jQuery(this).toggleClass('is-active');
    jQuery('.mobile-nav').toggleClass('active');
        if(jQuery('.mobile-nav').hasClass('active')) {
            $('body').on('touchmove', false);
        } else  {
            $('body').off('touchmove', false);
        }
});

If anyone can see any flaws in this approach or ways to neaten it up that would be great. Seems to be working nicely though!

Upvotes: 1

Alireza
Alireza

Reputation: 104920

Don't forget $ or "jQuery" before all Element selection in jQuery ... to make an If Statement work, it needs to be 

if (true) { ...something };

So for yours jQuery('.mobile-nav').hasClass('active') === true

So You need to encapsulate it in parentheses , so

jQuery('.mobile-nav').hasClass('active') needs to be in parentheses...

if(jQuery('.mobile-nav').hasClass('active')){
    //doSomething
}

Upvotes: 1

John R
John R

Reputation: 2791

Change this

if('.mobile-nav').hasClass('active'){
  //...
}

To

if(jQuery('.mobile-nav').hasClass('active')){
   //...
}

Upvotes: 1

Related Questions