Page 2 of 2 FirstFirst 12
Results 11 to 14 of 14

Thread: How do I differentiate between a tap and a swipe on a smartphone app

  1. #11
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    This from your post:

    Code:
             if(istouch){
              	var dt = document.getElementById(this.getAttribute('data-trigger'));
              	dt.addEventListener('touchend', function(e){
    	          	var ds = this.getAttribute('data-start');
    	          	if(ds && new Date().getTime() - ds < 400){
    	          		playstop.apply(this, [e]);
    	          	}
              	}, false);
              	dt.addEventListener('touchend', function(e){
    	          	var ds;
    	          	if(ds = this.getAttribute('data-start') && new Date().getTime() - ds < 100){
    	          		playstop.apply(this, [e]);
    	          	}
              	}, false);
              } else {
    should be:

    Code:
             if(istouch){
              	var dt = document.getElementById(this.getAttribute('data-trigger'));
              	dt.addEventListener('touchstart', function(e){e.preventDefault(); this.setAttribute('data-start', new Date().getTime())}, false);
              	dt.addEventListener('touchend', function(e){
    	          	var ds = this.getAttribute('data-start');
    	          	if(ds && new Date().getTime() - ds < 400){
    	          		playstop.apply(this, [e]);
    	          	}
              	}, false);
              } else {
    Scrolling erratic in what way?

    Unrelated, but might fix that - I have an idea to use the x/y coordinates of the touchstart and touchend events to determine if it's a tap or a swipe. If they occur within - say 10px of each other it's a tap, otherwise it's a swipe. That might be more precise than timing the length of time between touchstart and touchend. Both methods might be combined for optimal performance.
    Last edited by jscheuer1; 11-01-2013 at 02:16 PM. Reason: first response was wrong
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  2. #12
    Join Date
    Aug 2010
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John,

    Thank you very much, that fixed it, I can now play sounds and scroll the page. Re the erratic scrolling I mentioned previously, that still occurs. It's a little hard to describe but if you recall there's one line of English followed by two lines of Spanish - the formal and informal and this is repeated many times on a page. When I swipe the screen pressing on an English phrase it consistently behaves as I'd expect, whether swiping slow or fast. When I first load a page and swipe on a Spanish phrase it seems to swipe normally both slow and fast but after a few seconds only responds to vigorous swipes and sometimes doesn't scroll at all, unless I carefully swipe on the English phrase.

    Thanks again for your ongoing support.

    Tony
    Last edited by jscheuer1; 11-02-2013 at 12:05 PM. Reason: unnecessary quoting

  3. #13
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    We can experiment with removing the preventDefault:

    Code:
             if(istouch){
              	var dt = document.getElementById(this.getAttribute('data-trigger'));
              	dt.addEventListener('touchstart', function(e){this.setAttribute('data-start', new Date().getTime())}, false);
              	dt.addEventListener('touchend', function(e){
    	          	var ds = this.getAttribute('data-start');
    	          	if(ds && new Date().getTime() - ds < 400){
    	          		playstop.apply(this, [e]);
    	          	}
              	}, false);
              } else {
    BTW, I went ahead and wrote the code I was mentioning before, you can try that as well if you like. Only use one or the other, these are not to be combined:

    Code:
             if(istouch){
              	var dt = this.getAttribute('data-trigger'), $dt = $('#' + dt);
              	dt = document.getElementById(dt);
              	dt.addEventListener('touchstart', function(e){$dt.data({tstart: new Date().getTime(), tx: e.pageX, ty: e.pageY});}, false);
              	dt.addEventListener('touchend', function(e){
    	          	var ds = $dt.data('tstart');
    	          	if(!ds){return;}
    	          	var vx = Math.abs(e.pageX - $dt.data('tx')), vy = Math.abs(e.pageY - $dt.data('ty'));
    	          	if(vx < 10 && vy < 10 && new Date().getTime() - ds < 400){
    	          		playstop.apply(this, [e]);
    	          		$dt.data({tstart: null, tx: null, ty: null});
    	          	}
              	}, false);
              } else {
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #14
    Join Date
    Aug 2010
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John,

    Thank you so much, both changes worked. I tried the preventDefault change first, that worked but occasionally I found it played a sound when I swiped the screen. Next I tried the new version testing for time and movement and this worked perfectly.

    I really appreciate your help with this.

    I'm working through some other issues regarding changing text size by the user as there's a fairly wide range of pixel densities and screen sizes that users may be using, so they need to be able to change text size. I'll try and fix them myself before I come to you. I'm gradually learning javascript and the HTML5 Developers Conference last week in San Francisco was well worth 3 days of my time, I wish I had taken it several months ago as I learned a lot during the sessions and a one day training course on jQuery Mobile.

    Thanks again,

    Tony

Similar Threads

  1. Accordion Content Menu Collapse and Smartphone Issues
    By vflor in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 06-13-2013, 01:56 PM
  2. how to differentiate rows
    By mtokoly in forum PHP
    Replies: 1
    Last Post: 07-31-2009, 02:09 PM
  3. Resolved Motorola Q Smartphone & Skype
    By TheJoshMan in forum Computer hardware and software
    Replies: 0
    Last Post: 10-24-2008, 12:39 AM
  4. Image swipe using div tags
    By Thana in forum JavaScript
    Replies: 1
    Last Post: 04-30-2008, 12:06 PM
  5. Image swipe?
    By golfingtitan in forum JavaScript
    Replies: 0
    Last Post: 05-10-2007, 06:12 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •