CODEWITHSUNDEEP
jqueryjquery-mobile
Ashwin
Ashwin

Reputation: 473

jQuery Mobile swipe not working

I am working on to create my own image gallery for a project. For that I need swipe event. So found the below code on jsfiddle. Inserted all the necessary files. It shows the list and all.. But still the swipe is not working.? Am I writing the jquery code in the right place? Or something wrong? Here`s my code:

    <html>
        <head>
        <meta charset="utf-8" />
        <title>Home</title>
        <!-- Meta viewport tag is to adjust to all Mobile screen Resolutions-->
        <meta name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1" />

        <link rel="stylesheet" type="text/css" href="Css/style.css" />
        <link rel="stylesheet" type="text/css" href="Css/Jstyle.css" />
        <link rel="stylesheet" type="text/css" href="Css/jquery.mobile.theme-1.2.0.css" />
        <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />

        <script type="text/javascript" src="Javascript/jquery1.js"></script>
        <script type="text/javascript" src="Javascript/jquery2.js"></script>
        <script type="text/javascript" src="css/jq1.6.2.js"></script>

        <script type="text/javascript">
        $("#listitem").swiperight(function() {
            $.mobile.changePage("#page1");
        });
        </script>  

        </head>
        <body>

            <div data-role="page" id="home"> 
            <div data-role="content">

                    <ul data-role="listview" data-inset="true">
                        <li id="listitem"> Swipe Right to view Page 1</a></li>
                    </ul>

            </div>
        </div>

        <div data-role="page" id="page1"> 
            <div data-role="content">

                <ul data-role="listview" data-inset="true" data-theme="c">
                    <li id="listitem">Navigation</li> 

                </ul>

                <p>
                     Page 1
                </p>
            </div>
        </div>

        </body>

Upvotes: 8

Views: 32194

Answers (2)

Jai
Jai

Reputation: 74738

Try with pageinit handler for jQuery mobile:

$(document).on('pageinit', function(event){
   $("#listitem").swiperight(function() {
        $.mobile.changePage("#page1");
    });
});

Docs for pageinit @ jquery mobile.

From the docs:

Take a look at Configuring Defaults

Because the jquery-mobile event is triggered immediately, you'll need to bind your event handler before jQuery Mobile is loaded. Link to your JavaScript files in the following order:

<script src="jquery.js"></script>  
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

Upvotes: 15

Victor
Victor

Reputation: 21

This was driving me nuts too..I didn't have to use .on('pageinit') as suggested in previous post. Turns out my syntax was correct in my JQuery, but CASE SENSITIVTY was my issue. 'swiperight' didn't work, but 'swipeRight' did! The below code worked for me, and also fixed the issue of Swipe preventing up and down document scrolling in mobile browsers. Be sure to specify the swipeRight and swipeLeft methods seperately instead of one generic 'swipe' class and you're good to go! * Take note of the Exclude Elements line at the bottom, notice I took 'span' out of the list, to allow swiping on the commonly used, span element.

$(function() {  

      $('.yourclassname').swipe( 
      {
        swipeLeft:function(event, direction, distance, duration, fingerCount) 
        {
            // do your swipe left actions in here, animations, fading, etc..
            alert(direction);
        },
        swipeRight:function(event, direction, distance, duration, fingerCount) 
        {
            // do your swipe right actions in here, animations, fading, etc..
            alert(direction);
        },
        threshold:4,
        // set your swipe threshold above

        excludedElements:"button, input, select, textarea"
        // notice span isn't in the above list
      });
});

Upvotes: -1

Related Questions