Sliding range input right invokes swiperight about jquery-touch-events HOT 14 CLOSED

I think Vladimir has done a really nice job but there are things that are kinda wonky (like this). Since JQM is dead, his framework is really the only option out there. There's a market for a good framework that is more html compatible which would make it easier for all sorts of plugins to be added (or moved over from jQuery.

And thanks for all your help on this!

from jquery-touch-events.

So I figured out a temporary workaround. At this point I've only tested this in a browser and not on an actual Android or iOS device but it's a building block you could use to add an actual "ignore list" to your really nice plugin:

  $("#settingsPage").on("swiperight", function (event) {
    el = document.elementFromPoint(event.handleObj.handler.arguments[1].startEvnt.offset.x,
                                                           event.handleObj.handler.arguments[1].startEvnt.offset.y);
    if( $(el).hasClass("no-swipe") )
    {
      event.stopPropagation();
      return(false);
    }
    else
      goBack();
  });

The problem that I see with this example is that document.elementFromPoint(x,y) is returning the parent div just surrounding the range slider. However it also contains the children. I'll let you figure out how to implement this but it should be pretty easy.

Cheers!

from jquery-touch-events.

The mechanics of the library, and in particular to the various swipe* events boil down to mousemove and touchmove. As such, I think the easiest thing to implement and fix here would be to stop the move events on the range input from propagating up the DOM tree.

Does something like this work?

$('#settingsPage').on('touchmove mousemove', 'input[type="range"]', function(e) {
  e.stopPropagation();
});

from jquery-touch-events.

No, that didn't work.

I had already tried several methods of stopPropagation() and I couldn't get anything to work other than what I posted earlier. (sorry, full on ADD day! LOL)

from jquery-touch-events.

Okay, thanks. Could you put a minimal replicable example together for me to have a look at?

Thanks!

from jquery-touch-events.

I would just send you a link to what's on my server but I don't know if DM's are open on github.
My dm's are open on Twitter so hit me there. It's a rough framework for a new app but my main app has this same control and the same problem.

from jquery-touch-events.

I actually think this might be a conflict with F7. I've just put a demonstration together on jsFiddle, and adding in the suggestion of e.stopPropagation() does indeed fix the issue.

Please see here: https://jsfiddle.net/benmajor/rxy93b6m/2/

from jquery-touch-events.

I think you're right. I'll post it there and see what he says.

from jquery-touch-events.

As an FYI, I posted the issue here

from jquery-touch-events.

Having followed the thread on the F7 forum, I'm going to go ahead and close this issue because it appears as though the problem is actually related to the way in which F7 intercepts native events.

If you do encounter any further issues, let me know!

from jquery-touch-events.

Yep, this should be closed (for now).

If anyone else wanders in here with this problem, here's how I worked around it (so far)

  $("#settingsPage").on("swiperight", function (event) {
    el = document.elementFromPoint(event.handleObj.handler.arguments[1].startEvnt.offset.x, 
                                   event.handleObj.handler.arguments[1].startEvnt.offset.y);
    if( $(el).hasClass("no-swipe") )
    {
      // here we have to stop this event dead in its tracks
      event.stopPropagation();
      // next, get the id of the input (child) and trigger a change event on it
      var elID = $("#" +el.id +" input").attr('id');
      $( "#" +elID ).trigger( "change" );
      return(false);
    }
    else
      goBack();
  });
  
  // update the displayed value
  $('#myid').on('change', function (e) {
    // we need a micro timeout otherwise F7
    // will not have fully updated the value
    // so that it equals the label
    setTimeout(()=>{
      $('#valRange').text( $("#myid").val() );
    }, 25);
  });

It's messy but it seems to be working (mostly). In chrome the swiperight still gets invoked if I move the range slider from zero all the way to the right. I'll test it further on a device later today.

from jquery-touch-events.

Okay, thanks for the update. I'm glad that you managed to find a workaround, albeit slightly hacky! It's a shame that the library doesn't work right off the bat in F7, but I guess that's one of the problems of using multiple-dependency solutions.

from jquery-touch-events.

Yeah, it is a very nice framework and I've used in the past to spin up a few MVP demos. I have often wondered about releasing a more extensible framework that focuses more on functionality than theming, but I'm not really sure there's space in the market for another JS framework. I've been using React and Ionic for a while and I think that's where the hybrid market is heading.

from jquery-touch-events.

Everyone wants to go down that path but there's no market for it. 80% of cordova, react, ionic developers aren't deep coders. They're cobblers looking to put together apps that work as quickly and easily as possible. That requires an HTML5 compliant framework with sufficient .css widgets to do what one wants. Vladimir has the right idea but he gets in his own way... this bug is an example. The way he coded this widget, while it works in kitchensink it really doesn't work when you add in tools by other developers and that's the problem.... you can't force people to do everything exactly the way you want and the framework (be it jqm, react, ionic, f7) has to support that. He has other pieces that, following his own documentation, will blow the app up. (It's still the best thing out there.) As for react, no one has proven to me that Zuckerberg, Inc isn't injecting tracking code and I have too many clients that would freak at that thought... two govt clients have flat out ruled React out of the equation for that very reason. If you took F7 and fixed all the issues it's growth would explode but as it is, it's pretty limited. Lots of people like you will spin up a MVP and once the concept is proven they move on to other tools.

from jquery-touch-events.