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
});
});
Related
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'
});
}
I am using fullpage.js to create a wp site, I wonder if it is possible change the scroll direction when the user gets to a certain page.
To explain better, let's use this this example:
http://alvarotrigo.com/fullPage/examples/navigationV.html
Is it possible for the scroll direction to change to horizontal when you visit the second slide?
So instead of clicking on the arrows to navigate horizontally, I want the mouse wheel to scroll horizontally.
Is this possible with fullpage.js or do I have to change to another script?
Okay, here's the basic method:
When you get to a page that needs horizontally scrolled, add a mousewheel listener that:
Turns scroll events into left or right slide changes and
Prevents the default for the mousewheel unless:
Last slide and scroll down or
First slide and scroll up
Turn off the listener when you enter another slide.
There is also some code to prevent things from happening while slides are loading.
var currentSlide = 0;
var loaded = false;
$('#fullpage').fullpage({
navigation: true,
navigationTooltips: ['First section', 'Second section', 'Third section'],
sectionsColor: ['#f1c40f', '#e67e22', '#c0392b'],
loopHorizontal: false,
afterLoad: function (anchorLink, index){
loaded = true;
},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
currentSlide = slideIndex;
loaded = true;
},
onLeave: function(index, nextIndex, direction) {
loaded = false;
if (nextIndex == 2) {
$('#fullpage').on("mousewheel",function(e){
if(loaded){
loaded = false;
var delta = e.originalEvent.deltaY;
console.log(delta);
if(delta>0){ //down
if(currentSlide===2){//if last slide
$('#fullpage').off("mousewheel");
}else{
$.fn.fullpage.moveSlideRight();
e.preventDefault();
e.stopPropagation();
}
}else{ //up
if(currentSlide===0){//if first slide
$('#fullpage').off("mousewheel");
}else{
$.fn.fullpage.moveSlideLeft();
e.preventDefault();
e.stopPropagation();
}
}
}else{ //slide still loading, don't scroll
e.preventDefault();
e.stopPropagation();
}
});
}
}
});
JSFiddle
This works on Chrome. I'm not sure how cross browser the e.originalEvent.deltaY bit is. You can replace the mousewheel handler with this plugin to make it properly cross platform.
Here's a JSFiddle with jquery.mousewheel for a fully cross platform solution.
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
$("#slider").live("hover", function(e) {
if (e.type == 'mouseenter') {
$("#slider").delay(100).fadeIn();
}
else {
$("#slider").delay(1200).stop(true, true).fadeOut();
}
});
I used a slider in jQueryUI. What I would like to achieve is when the user hovers their mouse over the slider, it shows, and when the mouse is not hovered over it, it fades out. However, my case is after the first time of the fade out, the slider do not fade back in no matter where I put my mouse on that location of slider. How can I fix this problem? Thanks
Using ahren's suggestions try this
$("#slider").hover( function( ) {
$("#slider").fadeTo( 1000, 1 );
},
function( ) {
$("#slider").fadeTo( 1000, 0 );
});
Fiddle here
This is another solution with mouseover and mouseout handlers with .animate() method:
$("#slider").mouseover(function() {
$("#slider").stop().animate({"opacity":0},500);
}).mouseout(function() {
$("#slider").stop().animate({"opacity":1},500);
});
I can get the tabs to auto rotate, and pause on hover, but can't seem to get them started again when you mouse out. Also, is "fadeInSpeed" done correctly? the Please take a look and see if you can help, it's much appreciated! Really glad to see jQueryTools doing well again!
$(function() {
var rotateDelay = 3500;
var rotateTabs=true;
var $tabItems = $('#flowtabs li a').hover(function(){
rotateTabs=false;
});
var tabs = $("ul#flowtabs").tabs('#flowpanes > div', {api:true, effect:'fade', fadeInSpeed: 100, rotate: true});
function doRotateTabs(){
if (rotateTabs) {
setTimeout(function(){
if (!rotateTabs) return;
if(tabs.getIndex() == $tabItems.length-1){
tabs.click(0);
}
else {
tabs.next();
}
doRotateTabs();
}, rotateDelay);
}
}
doRotateTabs();
});
Did you ever solve this problem
Why are you writing your own code to make it auto play I just passed the configuration for sideshow and it works. It seems to be pausing on mouse over and works like a charm.
My code is below
$(function() {
$(".slidetabs").tabs(".images > div", {
// enable "cross-fading" effect
effect: 'fade',
fadeOutSpeed: "slow",
// start from the beginning after the last tab
rotate: true
// use the slideshow plugin. It accepts its own configuration
}).slideshow({
autoplay: 'true'
});
});
I hope this helps Adity Bajaj