Reputation: 305
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
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
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
Reputation: 2791
Change this
if('.mobile-nav').hasClass('active'){
//...
}
To
if(jQuery('.mobile-nav').hasClass('active')){
//...
}
Upvotes: 1