stephband / jquery.event.swipe Goto Github PK
View Code? Open in Web Editor NEWjQuery custom events swipeleft, swiperight, swipeup and swipedown
Home Page: stephband.info/jquery.event.swipe
jQuery custom events swipeleft, swiperight, swipeup and swipedown
Home Page: stephband.info/jquery.event.swipe
It would be nice to have a graphical response of the navigation buttons beneath the swipe images
I am using Colorbox Swipe in Drupal 7 and I keep getting this error:
"jquery.event.move.js?osxh2i:399 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive."
I have looked this error up and found it is due to a few feature added to browsers recently. This error being the problem doesn't make sense as I have tried the swipe function in many older browsers and mobile devices and the swipe function still does not work at all.
I would appreciate any suggestions in fixing these issues.
This library breaks page level scrolling on a mobile device when a swipe event is attached to the body (or window). It works fine on a desktop browser.
$(document).ready(function() {
$('body').on('swiperight', function() {
alert('swiperight');
}).on('swipeleft', function() {
alert('swipeleft');
});
});
I need to be able to trigger several swipe, which bothers me in the current approach of the "threshold" (it is also applicable to the "sensivity") is that it is not possible to have 1 value per instance of "swipe" and if I have to do it on my side, it makes the code very complex for something that could be solved more simply. Indeed, in my opinion, it would be simpler to trigger systematically but by adding this parameters and let the callback decide what to do with it. The other approach would of course be to create instances of swipe to have a specific setting.
Another idea: currently the "threshold" uses a relative value, it would be interesting to be able to use values with unit (px / em / rem / vw / ...).
Hi,
It took me a bit of time to verify the swipe or scroll math in index.html
before using it in my code. If I understand the formula correctly, you're basically comparing absolute values to see whether finger movement is more pronounced vertically or horizontally. Replacing that code with if(Math.abs(e.distY) > Math.abs(e.distX)){ e.preventDefault();}
would make things easier to intuit.
Hello, I've created basic test of event.move and event.swipe libraries, and while event.move works fine, event.swipe doesn't work.
Here's the demo
http://jsfiddle.net/jpzafqdc/1/
Regards :)
I am trying to use the jquery.event.swipe plugin to expand and collapse a DIV on my page. I am having trouble getting the swipe events to fire.
On my page I have:
<div id="slidingContainer" class="sliding-container">
<span id="slidingButton" class="toggle-button">view</span>
<span>my title goes here</span>
<br />
<span>my content goes here</span>
<br />
</div>
and
<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/jquery-ui-1.10.1.js"></script>
<script src="/Scripts/jquery.event.move.js"></script>
<script src="/Scripts/jquery.event.swipe.js"></script>
<script src="/Scripts/custom.js"></script>
In custom.js I have the following.
$(document).ready(function () {
var indication = $('.slidingContainer')
indication
.on('swipeup', function (e) {
alert("Swipe Upwards");
})
.on('swipedown', function (e) {
alert("Swipe Downwards");
});
});
I would think that when I swipe up or down the alert box would pop up -- showing me that the event was firing -- but it doesn't. Any ideas?
release new version / tag new version to make it so
It would be nice to be able to use this module via npm / browserify
From: https://github.com/stephband/jquery.event.swipe/blob/master/index.html#L31-L33
<!--[if lte IE 8]><link rel="stylesheet" type="text/css" href="http://stephband.github.com/template/css/template.ie.css" /><![endif]-->
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="http://stephband.github.com/template/css/template.ie8.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="http://stephband.github.com/template/css/template.ie7.css" /><![endif]-->
Missing css in the href's? are really needed?
Hi,
first of all thanks for this plugin.
I have a strange behaviour, when I bind to the body element swipeleft and swiperight this way:
$('body').bind('swipeleft', function(){
alert('swipeleft')
});
$('body').bind('swiperight', function(){
alert('swiperight')
});
scroll is no more working on my page (only on ios device) and no alert launched.
Anyone ever experienced this?
Thanks
Hi,
This plugin depends on jquery.event.move but the require statement does not "ask" it.
define(['jquery'], thisModule);
Shouldn't it be define(['jquery', undefined, 'jquery.event.move'], thisModule);
?
My current issue is that when I require jquery.event.swipe, I have to configure a shim to say it relies on jquery.event.move but during the r.js optimization, despite the fact that move is inserted, swipe does not know move because nobody asked for "move".
My current workaround is to rewrite the plugin:
onBuildWrite: function (moduleName, path, contents) { if ( moduleName === 'jquery.event.swipe' ) { return contents.replace(/\['jquery'\]/g, "['jquery', undefined, 'move']"); } else { return contents; } },
WDYT?
Thanks!
Cheers,
Raphaël
I see that a long time ago, someone opened an issue because there was no license information. Now there is a license (yay!) but it is not an OSI-approved license (boo!). Would you ever consider licensing under a permissive, OSI-approved license instead of WTFPL for jquery.event.swipe and jquery.event.move? If you really don't care what people do with your code, CC0 (Creative Commons public domain declaration) is a totally acceptable way to go. More and more development teams are being required to ONLY use OSS under OSI-approved licenses...
Thanks for your consideration!
Hi,
i made a little path for select active slide button. Can you add to master tree?
Thank's,
Petr Mašát
From c14153e25820f31ddec7734a64d5d57feaf81a23 Mon Sep 17 00:00:00 2001
From: Petr Mašát <[email protected]>
Date: 28.3.2014 11:31:46
Select active class for slide button
diff --git a/index.html b/index.html
index 24400d4..f8b62fb 100644
--- a/index.html
+++ b/index.html
@@ -251,6 +251,10 @@
// Update the active slide index
i = slides.index(e.target);
+
+ // select active class for slide button
+ jQuery('.slide_button').removeClass('active');
+ jQuery('.slide_button').eq(i).addClass('active');
})
// The code below handles what happens before any swipe event is triggered.
Wondering if you plan on attaching a MIT or GPL license to this?
Thanks
Question: Is this package Jquery 2.x compatible?
Hello,
I'm using unslider and jquery.swipe.js on my website here: http://104.131.137.134/Watertight/#features.
It doesn't swipe to the slides very well at all - most of the times the slides end up halfway on the screen. Any ideas on what's going on and how to fix it?
If I include jquery.event.move and jquery.event.swipe in my layout page (jQuery 1.9.1, jQuery UI 1.10.1, Bootstrap 2.3.0) simple scrolling on mobile devices becomes almost unresponsive. Taking out the move and swipe js files makes the pages work fine (albeit without the swipe events...)
Actually in IE10 WindowsPhone 8 swipe doesn't work. Any Ideas about how to fix it?
Thanks
I just noticed that swipe event stopped working on non-touch screen devices.
Hi!
When i used your jquery.event.swipe scrolling doesn't work. How can I fix this issue?
If jquery.event.move
is a dependency, add it to bower.json
and it will automatically be installed.
Because the work of the plugin is based on the movestart event, only stopping swipe* event is not sufficient to prevent event bubbling. To stop it movestart event should also be stopped. I think, it will be better, if swipe event will not have such a dependency.
Hey, when attaching a swipe left / right event the normal swipe down event get's blocked even though it's not defined.
After calling hte function with
But not possible to use the page normally.
Because the webpage where I'm using this plugin needs to scroll down to read the content it's weird.
My phone is Samsung Galaxy SIII (i9300) and browser is Chrome.
Hi - i have added left and right swipes to a large (ish) element on the page. however if i now swipe up or down in order to scroll the page up or down it does not work on the element - what can i add to allow this ?
Thanks.
Hi!
Suppose we have some div boxes having class 'elem' whithin a container '#box'
this works:
$(".elem").on("swipeleft", function() {console.log("swipe");});
this doesn't work:
$("#box").on("swipeleft", ".elem", function() {console.log("swipe");});
Is there a reason I can't delegate swipe events?
Am I missing something?
Thank you.
Hi,
for some reason when i change the markup in your demo from this:
<img class="img_slide slide active" id="slide1" src="image.png"/><img class="img_slide slide" id="slide2" src="image.png"/><img class="img_slide slide" id="slide3" src="image.png"/>
to this:
<img class="img_slide slide active" id="slide1" src="image.png"/>
<img class="img_slide slide" id="slide2" src="image.png"/>
<img class="img_slide slide" id="slide3" src="image.png"/>
a strange margin/padding/border gets added on the sides of the image slides.
I found that when the < img > tags had no space or line breaks i works fine, but when i add my own line by line, the slides go all offset and weird.
Is this a bug, or is it supposed to be like this?
Thanks for great work!
mycode is not working
HTML:
js:
jQuery(document).ready(function() {
var wrap = jQuery('#swipe');
wrap
.on('swipeleft', function(e) {
alert('ss');
})
.on('swiperight',function(e){
alert('fff');
});
})
trying to scroll in page on mobile but swipe is triggered i want to stop this i tried this but no thing happened
jQuery.extend(jQuery.event.special.swipe,{
scrollSupressionThreshold: 10, // More than this horizontal displacement, and we will suppress scrolling.
// durationThreshold: 1000, // More time than this, and it isn't a swipe.
horizontalDistanceThreshold: Math.min(jQuery(document).width() / 2, 160), // Swipe horizontal displacement must be more than this.
verticalDistanceThreshold:Math.min(jQuery(document).height() / 2, 160), //jQuery('.second-section').offset().top + jQuery('.second-section').height(), // Swipe vertical displacement must be less than this.
});
Is there any way to still let scrolling happen if the container has one of the swipe events attached to it?
I only wanted to catch left/right swipe, but now I cant scroll within that container at all..
Suggestions after this discussion.
Use Travis CI for:
I suggest Travis CI because it's well integrated with GitHub and doesn't require much configuration, neither peculiar hosting service, so free, fast, easy and reliable.
No testing is done and this is somewhat lacking since it's really useful to avoid retrograding.
To provide a minified version is really helpful for people who just want to install it as a library and use it right away: you install it with npm or Bower and then just have to provide the link and boom it's in your JS libraries which are for instance all concatenated and minified later by a Grunt.
Also Install process, update of the package.json (test command, main files) and the README with a Changelog and a License would be welcomed :)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.