I have a jQuery plugin attached to an element, and I want to stop that plugin from working only on Mobile. I also have another plugin attached, a light box, but I want to stay regardless if someone is on mobile or desktop.
This is the plugin I want to stop on Mobile: https://github.com/mattbryson/TouchSwipe-Jquery-Plugin
Here is the code:
// Adding in the plugin
$(function() {
$(playlist).swipe({
swipeStatus:function(event, phase, direction, distance, duration) {
// code for swipy stuff here ....
// ...
// ...
}
});
// Trying to remove the plugin
window.onresize = function(event) {
var deviceWidth = $(window).width();
if(deviceWidth <= 768) {
$(playlist).swipe({
swipeStatus:function(event, phase, direction, distance, duration) {
event.preventDefault();
event.stopPropagation();
},
threshold: 0,
fingers:'all'
});
}
};
Let me know if you got any ideas. I've also tried detaching the playlist and reattaching it to the DOM and that didn't work either.
Thanks!
You can verify if the user agent is not a mobile device and init your plugin.
Demo:
function isMobile () {
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)
return true;
}
if(!isMobile()) {
$(playlist).swipe({
swipeStatus:function(event, phase, direction, distance, duration) {
event.preventDefault();
event.stopPropagation();
},
threshold: 0,
fingers:'all'
});
}
Related
I have this mobile menu that I'm currently building at the moment and I'm facing an issue with on('click') events. Whenever I try resizing the browser the event fires multiple times. At first load the script and event works fine, but when I start resizing the browser the event fires multiple times.
Below is a sample of the code I'm working on. Is there a way it fires only when once after resizing. I tried a temporary solution but it does not seem to take effect.
(function($){
'use strict';
var mobileMenu = {
init : function() {
$('.region-primary-menu').addClass('primary-mobile-menu');
$('.primary-mobile-menu .menu.-primary > .menu-item').addClass('mobile-menu-item');
$('.primary-mobile-menu .menu.-primary > .mobile-menu-item').on('click', function() {
$(this).toggleClass('active');
console.log('click');
})
},
clear : function() {
$('.primary-mobile-menu, .mobile-menu-item').removeClass('primary-mobile-menu mobile-menu-item');
}
}
$(document).ready(function() {
if ($(window).width() < 1180) {
mobileMenu.init();
}
else {
mobileMenu.clear();
}
});
$(window).on('resize', function(e) {
var resizeTimer;
clearTimeout(resizeTimer);
var resizeTimer = setTimeout(function() {
if ($(window).width() < 1180) {
mobileMenu.init();
}
else {
mobileMenu.clear();
}
}, 100)
});
})(jQuery)
It is because of click event being attached in mobileMenu.init(); function. On resize, a new clickevent is getting attached. You can use jQuery.off
$('.primary-mobile-menu .menu.-primary > .mobile-menu-item').off('click').on('click',
Because in your $(window).on('resize', function (e)... you do this :
if ($(window).width() < 1180) {
mobileMenu.init();
}
And in the mobileMenu.init() function definition you attach an event listener, so whenever you resize the window beneath 1180 size, it's going to attach more event listeners.
$('.primary-mobile-menu .menu.-primary > .mobile-menu-item').on('click' ...
Anyways the other answer tells you how to remove the event listener, which is what you should do to fix it.
TouchSwipe is a great plugin for adding swipe to your website. But I have an issue on selecting text when the this plugin is activated.
$(window).swipe( {
//Generic swipe handler for all directions
swipeRight:function(event, direction, distance, duration, fingerCount) {
dnlShow();
},
swipeLeft:function(event, direction, distance, duration, fingerCount) {
dnlHide();
},
//Default is 75px, set to 0 for demo so any distance triggers swipe
threshold: 75
});
Any good solution to fix this issue?
I have found two solutions:
Add .noSwipe class to the content that you want to be selectable. ( in my case it was impossible)
Detect the mobile and tablet devices first then activate this plugin so I did this:
// Check if you are in mobile or not
// Code credit: https://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery
function isMobile() {
try{ document.createEvent("TouchEvent"); return true; }
catch(e){ return false; }
}
if ( isMobile() == true ) {
// Swipe plugin for handling touch events
$(window).swipe( {
//Generic swipe handler for all directions
swipeRight:function(event, direction, distance, duration, fingerCount) {
dnlShow();
},
swipeLeft:function(event, direction, distance, duration, fingerCount) {
dnlHide();
},
//Default is 75px, set to 0 for demo so any distance triggers swipe
threshold: 75
});
}
for detecting mobile and tablet devices there are several solutions, you can check at What is the best way to detect a mobile device in jQuery?
I hope this help others too.
You better attach swipe to touch event, so it also work on PC with touchscreen.
The code looks like :
$(document).on("touchstart", function(event) {
$(window).swipe( {
swipeRight:function(event, direction, distance, duration, fingerCount) {
dnlShow();
},
swipeLeft:function(event, direction, distance, duration, fingerCount) {
dnlHide();
},
threshold: 75
});
});
I'm using mmenu (http://mmenu.frebsite.nl) to create my mobile menu. I implement my jQuery code like this :
$('.mobile-menu .menu-block-wrapper').attr('id', 'menu-left');
$('.mobile-menu .menu-block-wrapper').mmenu({
configuration: {
selectedClass: "active",
menuNodetype: "div",
},
dragOpen : {
open: false,
threshold : 100
}
});
$(".mobile-menu-trigger").trigger("open");
I'd like, when my browser window is less than, say, 720px, to set dragOpen to true, and when I switch back to a normal resolution, to set it back to false.
Any help is greatly appreciated.
Thanks
The plugin initializes the dragging when it is fired. So you can't update the option after the plugin has been fired.
I guess you could bind a function to the dragleft, dragright, dragup and dragdown events that measures the browser width and, if larger than 720px, prevents propagation. Something like this:
$("#page").on("dragleft dragright dragup dragdown", function( event ) {
if ( $(window).width() > 720 ) {
event.stopImmediatePropagation();
event.gesture.stopImmediatePropagation();
} else {
// the plugin will fire its events bound to dragleft/dragright/dragup/dragdown
}
});
$('.mobile-menu .menu-block-wrapper').mmenu({
drag: {
open: true,
treshold: 100
}
});
Not sure if this will work though, having seen this issue with hammer.js:
https://github.com/EightMedia/hammer.js/issues/333
How can I prevent overscroll in Safari iOS?
I would use the touch gesture for navigate on a site but I can't.
I tried this:
$(window).on('touchstart', function(event) {
event.preventDefault();
});
But in this way I disabled all gesture, infact I can't zooming with pinch-in and pinch-out.
Any solutions?
Thanks.
This way will allow scrollable elements while still preventing the overscroll in the browser itself.
//uses document because document will be topmost level in bubbling
$(document).on('touchmove',function(e){
e.preventDefault();
});
//uses body because jquery on events are called off of the element they are
//added to, so bubbling would not work if we used document instead.
$('body').on('touchstart','.scrollable',function(e) {
if (e.currentTarget.scrollTop === 0) {
e.currentTarget.scrollTop = 1;
} else if (e.currentTarget.scrollHeight === e.currentTarget.scrollTop + e.currentTarget.offsetHeight) {
e.currentTarget.scrollTop -= 1;
}
});
//prevents preventDefault from being called on document if it sees a scrollable div
$('body').on('touchmove','.scrollable',function(e) {
e.stopPropagation();
});
This Should be the easiest way to accomplish this:
$(function() {
document.addEventListener("touchmove", function(e){ e.preventDefault(); }, false);
});
Hope this helps.
Best.
For a current project i need to trigger the Start/Stop Event of the jCarousel Plugin.
carousel.stopAuto();
carousel.startAuto();
I'm not that JavaScript addicted to solve the problem myself. A short explaination what i'm trying to do:
The carousel is a fancy product slider and works already as i expected. But the point is the product-description should be available as a tooltip. So i have to stop the carousel if an tooltip is shown and to restart it after the tooltip is closed. FYI: The tooltip Plugin is Cluetip. Does anyone have any suggestions for me?
Found a solution. Use the following function as init callback for your carousel setup.
function initCarousel (carousel) {
jQuery('#cluetip').live('mouseover mouseout', function(event) {
// Disable default action
event.preventDefault();
// Stop carousel at mouseover
if (event.type == 'mouseover') {
carousel.stopAuto();
};
// Restart carousel at mouseout
if (event.type == 'mouseout') {
carousel.startAuto()
};
});
};
Try below code. It works fine for me :)
Ex :
function mycarousel_initCallback(carousel)
{
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};
$(document).ready(function() {
$('#mycarousel').jcarousel({
initCallback: mycarousel_initCallback
});
});