MiroslavP
New Coder
Hello,
I need to set swipeup and swipedown to work all over the page. But it didn't work around .swiper-container.
How do I do that?
Image for ilustration: Green: SWIPE UP and SWIPE DOWN zone PINK: ON THIS DIV turn SWIPE OFF for this function. On this position I have another vertical slider.
Example code:
or Testing
I need to set swipeup and swipedown to work all over the page. But it didn't work around .swiper-container.
How do I do that?
Image for ilustration: Green: SWIPE UP and SWIPE DOWN zone PINK: ON THIS DIV turn SWIPE OFF for this function. On this position I have another vertical slider.
Example code:
Code:
<div class="section">
<div class="swiper-container">
</div>
</div>
.section{
width:100%;
height:100vh;
background:green;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-container{
width:90%;
height:200px;
background:red;
}
(function() {
// initializes touch and scroll events
var supportTouch = $.support.touch,
scrollEvent = "touchmove scroll",
touchStartEvent = supportTouch ? "touchstart" : "mousedown",
touchStopEvent = supportTouch ? "touchend" : "mouseup",
touchMoveEvent = supportTouch ? "touchmove" : "mousemove";
// handles swipeup and swipedown
$.event.special.swipeupdown = {
setup: function() {
var thisObject = this;
var $this = $(thisObject);
$this.bind(touchStartEvent, function(event) {
var data = event.originalEvent.touches ?
event.originalEvent.touches[ 0 ] :
event,
start = {
time: (new Date).getTime(),
coords: [ data.pageX, data.pageY ],
origin: $(event.target)
},
stop;
function moveHandler(event) {
if (!start) {
return;
}
var data = event.originalEvent.touches ?
event.originalEvent.touches[ 0 ] :
event;
stop = {
time: (new Date).getTime(),
coords: [ data.pageX, data.pageY ]
};
// prevent scrolling
if (Math.abs(start.coords[1] - stop.coords[1]) > 10) {
event.preventDefault();
}
}
$this
.bind(touchMoveEvent, moveHandler)
.one(touchStopEvent, function(event) {
$this.unbind(touchMoveEvent, moveHandler);
if (start && stop) {
if (stop.time - start.time < 1000 &&
Math.abs(start.coords[1] - stop.coords[1]) > 30 &&
Math.abs(start.coords[0] - stop.coords[0]) < 75) {
start.origin
.trigger("swipeupdown")
.trigger(start.coords[1] > stop.coords[1] ? "swipeup" : "swipedown");
}
}
start = stop = undefined;
});
});
}
};
//Adds the events to the jQuery events special collection
$.each({
swipedown: "swipeupdown",
swipeup: "swipeupdown"
}, function(event, sourceEvent){
$.event.special[event] = {
setup: function(){
$(this).bind(sourceEvent, $.noop);
}
};
});
})();
$(document).on("pageinit", function() {
if($(".swiper-container").on("swipeup"))
{
console.log("On container");
}
$('[data-role="page"]').one('pageshow', function(e, data) {
$(document).on('swipeup', function(event) {
console.log(event);
$('[data-role="page"]').append('x');
});
$(document).on('swipedown', function(event) {
console.log(event);
$('[data-role="page"]').append('y');
});
});
});
or Testing
jQuery Mobile swipe up and down - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
jsfiddle.net