Thursday, December 29, 2011

jQuery Mobile swiperight too sensitive

While adding functionalities that triggers when the jQuery Mobile swiperight event is fired, I met the same problem as ade_cd, where the swiperight event gets triggered even when I am scrolling a page. On examining the jQuery Mobile 1.0 source code, I realized that the jQuery Mobile team has taken his suggestion and made the previously hardcoded values into parameters.

The parameters should be changed after the jQuery Mobile script has loaded. Here is the _Layout.cshtml file I’m using for my ASP.NET MVC 3 project.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/themes/red-blue/RedBlue.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/red-blue/jquery.mobile.structure-1.0.min.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.mobile-1.0.min.js")" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {             // huan086: Swipe right is way too sensitive on iPhone 4S and gets triggered even when scrolling vertically.
            // Set the horizontalDistanceThreshold to 50% of screen to make sure that it does not get triggered accidentally.
            $.event.special.swipe.horizontalDistanceThreshold = Math.min($(document).width() / 2, 160);         });     </script>
</head>
<body>
    @RenderBody()
</body>
</html>

2 comments:

Anonymous said...

Thank you, very helpful post!

Anonymous said...

This is a great fix. Thank you!