[ALifeOfMusicParticipant]

Hi, I have placed some pictures on my page that link to content further down the page. This works very nicely on the desktop version, but on mobile, there is no option for hovering. So, as I scroll along, just placing my finger on the screen to scroll down, should it hit one of these links, causes it to go to the link. On most mobile sites, as long as your finger moves just a bit, it won’t open linked content. How would I activate that functionality? Thanks. My page is http://alifeofmusic.com/records/catalogue/
Thanks!

[Nabeel AModerator]

Hi there,

Thanks for writing in! Try adding the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).on('touchmove', function(e) {
    e.preventDefault();
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[ALifeOfMusicParticipant]

Hi Nabeel, thanks for your answer. The code seems to have disabled scrolling on mobile. The links still move me down the page when i tap them, but i can’t scroll normally. I’m using safari on the latest version of iOS. There must be more code I need to add to enable scrolling again? I left the code in there at http://alifeofmusic.com/records/catalogue/ so you can see what the added code made it do.

[Nabeel AModerator]

Hi again,

Can you please try replacing the previous code with this one:

if(navigator.userAgent) {
var iOs = navigator.userAgent.indexOf('iphone') >= 0 || navigator.userAgent.indexOf('ipad') >= 0; 
var clickEvent = iOs ? 'touchend' : 'click';
var touchMoving = false;
if (iOs)
{  
  document.ontouchmove = function(e)
  {
     touchMoving = true;
  }

  document.ontouchend = function(e)
  {
    touchMoving = false;
  }
} 

jQuery(document).bind('ready', function($) 
{
  $('img').bind(clickEvent, function()
  {
    if (touchMoving) return false;
  });
});
}

Let us know how this goes!

[ALifeOfMusicParticipant]

Hey, thanks for working through this with me. Ok, so scrolling works now, but the original problem is back on some of the content. Where it works: all buttons on the homepage (http://alifeofmusic.com/records/). Where it doesn’t work: all image links on the catalogue page (http://alifeofmusic.com/records/catalogue/), and the “view album set” button. Oddly, it does work on the “Add to Cart” buttons on the Catalogue page. Now that I think about it, the problem is that it goes to the link when then finger presses rather than when it releases. So i need code that will tell it to go to linked material in button or photo upon release rather than press. thanks.

[Rue NelModerator]

Hello There,

Thanks for the updates! There seems to be a JS error on the page. Please have your JS code updated and make use of this code instead:

(function($){
if(navigator.userAgent) { 
 var iOs = navigator.userAgent.indexOf('iphone') >= 0 || navigator.userAgent.indexOf('ipad') >= 0; 
 var clickEvent = iOs ? 'touchend' : 'click';
 var touchMoving = false;
 if (iOs){  
  document.ontouchmove = function(e)
  {
     touchMoving = true;
  }

  document.ontouchend = function(e)
  {
    touchMoving = false;
  }
 } 

 $(document).bind('ready', function() {
  $('img').bind(clickEvent, function(){
    if (touchMoving) return false;
  });
 });
}
});

Please let us know if this works out for you.

[ALifeOfMusicParticipant]

Thanks for sticking with this. I replaced the old JS with the latest, but it is still broken in the first two sections of the catalogue page (http://alifeofmusic.com/records/catalogue/). Do you think it would work to erase the two sections and build them again? I was playing with appearance a lot in those sections, and maybe some of the code got messed up in the process?

[RadModerator]

Hi there,

Touch sensitivity is hardware related I think. I’m not sure.

You may try that, but I can’t really tell if it’s the right thing to do.

If you hold the screen and move even by a bit, it’s already considered scrolling. And it’s something that browser can’t alter since it’s more related to hardware calibration. Even with above code, touch for scrolling and touch for clicking are still different events. The document may not receive touch event, but the device can still delegate it since it’s hardware.

Thanks!

[ALifeOfMusicParticipant]

Rad, please read my posts above. I titled the forum topic a bit sloppily. I have a problem with the links on this page http://alifeofmusic.com/records/catalogue/ activating on the touch rather than the release, which causes an interruption in scrolling. (Other pages in this site function correctly.) So the scenario is this: you’re scrolling, and you put your thumb down to scroll further, but it activates the link as soon as you touch. It needs to activate when you have stopped scrolling, and when you release.

[RadModerator]

Hi there,

Yes, I understand, and it’s due to touch events. And there is no way to configure its sensitivity than to disable the touch events. Please try this code,

jQuery ( function( $ ) {

$( document ).ready( function() {

setTimeout( function( ) {

$('a').off('touchstart touchend');

}, 300 );

} );

} );

Mobile has touch event for start and end, and it’s what triggers it. Though, for standard links, even turning it off has no effect.

Thanks!

[ALifeOfMusicParticipant]

Rad! the code works! I was able to tweak the delay value just a little bit to make it nice on the iOS. Thanks a lot!

[Nabeel AModerator]

Glad we could help.

Cheers!

[Author]

Posts