stephband/jquery.event.swipe

jQuery custom events swipeleft, swiperight, swipeup and swipedown

jquery.event.swipe's Issues

Don't prevent scrolling if swipe up/down is not used

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..

Question: Is this package Jquery 2.x compatible?

Question: Is this package Jquery 2.x compatible?

Publish to NPM

It would be nice to be able to use this module via npm / browserify

No more scroll when binding to body

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

License

Wondering if you plan on attaching a MIT or GPL license to this?

Thanks

Get event.swipe working on jsfiddle

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 :)

Bad links?

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?

Depends on jquery.event.move but not "required"

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

Plugin prevents scroll webpage normally on mobile.

After calling hte function with $('body').on('swipeleft', function(e) { .... }); and also with $('body').on('swiperight', function(e) { .... }); on mobile is not possible to scroll the webpage up/down as a normal webpage. It still frozen and only works to left and right.
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.

Doesn't work with jquery 3.0

StopPropogation in the event doesn't stop event from bubbling through events

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.

Travis CI: publication, uglify and tests

Suggestions after this discussion.

Use Travis CI for:

• npm releasing
• testing (running npm test in the travis script - done by default in node projects)
• uglify (minify the JS input to provide both versions)

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 :)

Simplify swipe or scroll math formula with Math.abs

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.

Scroll doesn't work

Hi!
When i used your jquery.event.swipe scrolling doesn't work. How can I fix this issue?

Avoid "threshold"

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 / ...).

Not working on IE10 Windows Phone 8

Actually in IE10 WindowsPhone 8 swipe doesn't work. Any Ideas about how to fix it?
Thanks

Why not declare dependencies in bower.json?

If jquery.event.move is a dependency, add it to bower.json and it will automatically be installed.

Add main key to package.json

Adding the main key to package.json helps volo install the correct file.

{"main": "js/jquery.event.swipe.js"}

swipe left / right event blocks normal swipe / scroll down event

Hey, when attaching a swipe left / right event the normal swipe down event get's blocked even though it's not defined.

Bower integration does not work correctly

release new version / tag new version to make it so

jQuery 2.x support

Add active class to slide button

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.

Event not triggered if bound in delegation mode

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.

allow scrolling swipe as normal

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.

Doesn't allow page scrolling on mobile device when listener attached to body

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');
    });
});

Example: http://www.nathantaylor.com/swipe.html

PreventDefault inside passive

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.

swipe event stopped working in all browsers

I just noticed that swipe event stopped working on non-touch screen devices.

(left-right)swipe occurs during page scroll (up-down)

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.
});

Strange padding/margin around slides when img tags are on separate lines in markup

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!

swipe not working

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');
});
})

Feedback of content-section in the navigation

It would be nice to have a graphical response of the navigation buttons beneath the swipe images

Sluggish Scrolling Issue on iOS devices with Twitter Bootstrap 2.3.0

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...)

Using Swipe To Slide A DIV Up Or Down

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?

License (again)

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!

Unslider and jquery.event.swipe not working very well

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?