swipeleft and swiperight do not work on pages that have enough content that you have to scroll #91

nsalyzyn-atimi · 2013-01-05T00:36:43Z

The below code demonstrates the behaviour. If you run this as the index.html base in a config.xml with the appropriate jquery blackberry mobile js and and css in the same folder, you should see what I mean.

The problem is that when a screen is vertically scrollable (like the one below), then unless you swipe REALLY quickly and cross your fingers, stand on your head and wish on a star, the swipe won't get registered. Swipes in the boxed area, if they work, will cause a scroll left or right animation. You can see swipes working properly if you uncomment the line with scrollSupressionThreshold. I'm not sure if this is an appropriate workaround - maybe it's as simple as setting a better default for this value in this project?

Are touchmove events supposed to stop firing once scrolling begins? I think that makes sense, but it was my first time that it has impacted me.

I hope you can appreciate that tracking down the minimal case why swipe wasn't working here was not an easy task!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Test</title>

  <script>
    var meta = document.createElement("meta");
    meta.setAttribute('name','viewport');
    meta.setAttribute('content','initial-scale='+ (1/window.devicePixelRatio) + ',user-scalable=no');
    document.getElementsByTagName('head')[0].appendChild(meta);
  </script>

  <link rel="stylesheet" href="BlackBerry-JQM-all.min.css" />
  <style>
    .large-box-container {
      overflow:hidden;
    }
    .large-box {
      width:400%;
      height:100%;
      border: 1px solid gray;
      border-left:none;
      border-right:none;
      overflow-x:hidden;
     }
    .large-box .inner-box {
      width:25%;
      float:left;
      height:400px;
    }
    .big-spacer {
      margin: 40px 0;
      background: #661111;
      height:1000px;
    }
  </style>

  <script src="BlackBerry-JQM-all.js"></script>
  <script src="local:///chrome/webworks.js" type="text/javascript"></script>

  <script type="text/javascript">
    (function($) {
      $(function() {
        //$.event.special.swipe.scrollSupressionThreshold = 5;
      })
      $(document).on('pageinit', pageInit);

      function basicSwipe(goRight, container) {
        return function() {
          var itemWidth = container.width();
          var roundFunction = goRight ? Math.floor : Math.ceil;
          var adjustment = goRight ? 1 : -1;
          var currentScroll = container.scrollLeft();
          var currentItem = roundFunction(currentScroll / itemWidth);
          container.animate({scrollLeft:  (currentItem + adjustment) * itemWidth}, 500);
        }
      }

      function pageInit(e) {
        var page = $(e.target);
        page.find('.large-box-container > .large-box').each(function() {
          var container = $(this).parent();
          $(this).on('swipeleft', basicSwipe(true, container));
          $(this).on('swiperight', basicSwipe(false, container));

        })
      }
    })(jQuery)
  </script>
</head>

<body>
  <div data-role="page" id="page-1" data-theme="a">
    <div data-role="header" data-theme="a" data-position="fixed">
      <h1>Page 1</h1>
    </div>

    <div data-role="content">
      <p>Page 1 Content</p>
      <div class="large-box-container">
        <div class="large-box">
          <div class="inner-box">1</div>
          <div class="inner-box">2</div>
          <div class="inner-box">3</div>
          <div class="inner-box">4</div>
        </div>
      </div>
      <div class="big-spacer"></div>
    </div>

    <div data-role="footer" data-position="fixed">
      <div data-role="actionbar">
      </div>
    </div>

  </div>
</body>
</html>

jasondscott · 2013-01-07T19:21:43Z

Hi @nsalyzyn-atimi

I am not able to reproduce this issue with your code.
Seems to be working well. No wishing a star or finger crossing required.
Which build os build are you currently running?

Thanks for the post.

nsalyzyn-atimi · 2013-01-07T19:31:13Z

:)

Try swiping a bit slower. Or for some whitebox testing, put a console.log in the movehandler() found in $.event.special.swipe of the JQM js file. Maybe your device is a bit slower on its first touchmove event than the devices I'm using?

The specific issue is that if the first touchmove event has any vertical component and it has less horizontal component than $.event.special.swipe.scrollSupressionThreshold, then my device stops throwing touchmove events. Therefore, if you're trying to reproduce this issue as a device problem, then another whitebox testing approach would be raise the $.event.special.swipe.scrollSupressionThreshold to where your device is experiencing the same problem as myself.

I could reproduce this on multiple Dev Alpha B devices all running the latest OS as of 1 week ago. I know there was a new SDK/OS to be released around Jan 3rd, but I haven't seen that yet.

Hopefully this info helps.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

swipeleft and swiperight do not work on pages that have enough content that you have to scroll #91

swipeleft and swiperight do not work on pages that have enough content that you have to scroll #91

nsalyzyn-atimi commented Jan 5, 2013

jasondscott commented Jan 7, 2013

nsalyzyn-atimi commented Jan 7, 2013

swipeleft and swiperight do not work on pages that have enough content that you have to scroll #91

swipeleft and swiperight do not work on pages that have enough content that you have to scroll #91

Comments

nsalyzyn-atimi commented Jan 5, 2013

jasondscott commented Jan 7, 2013

nsalyzyn-atimi commented Jan 7, 2013