Why does my swipe code not trigger on Android 2.1?

Why does my swipe code not trigger on Android 2.1?

Hello, I am fairly new to jQuery Mobile.

I have what I think is reasonable code for doing a "swipe" change on a page.

It works on iPhone and on Android 2.2 .....

But for the life of me I cannot get this to trigger on 2.1

I can get the alert for the binds and such .. but no swipe alert........or rather....if I reload and swipe 10 times... it will work 10% of the time.


Can anyone tell me why please?

Thank you.

  1. <!DOCTYPE HTML>
    <html>
      <head>
        <meta name="viewport" content="user-scalable=no, width=device-width, height=device-height, minimum-scale=1, maximum-scale=1">
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>Home</title>
             <link rel="stylesheet" href="cv.css" type="text/css" media="screen" title="no title" charset="utf-8">
          <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0a4.1.min.css" type="text/css" charset="utf-8" />
          <!-- Override default css file to allow longer header/footer titles -->
          <link rel="stylesheet" href="pgandjqm-style-override.css" type="text/css" charset="utf-8" />
          <script src="jquery.mobile/jquery-1.4.4.min.js"></script>
          <script type="text/javascript" charset="utf-8" src="phonegap.0.9.4.js"></script>
          <script type="text/javascript" charset="utf-8" src="main.js"></script> 
          <script src="jquery.mobile/jquery.mobile-1.0a4.1.min.js"></script>
         
          <script type="text/javascript">
       
         function pageLoad() {


















  2.                panelTrack = ['#leftPanel', '#home', '#rightPanel'];
                   $(panelTrack[0]).hide();
                   $(panelTrack[1]).show();
                   $(panelTrack[2]).hide();

     
                  currentDiv = panelTrack[1];
            }
        </script>
         
         <script>
       
          $(document).ready(
     
              function() {

                  var panelTrack = ['#leftPanel', '#home', '#rightPanel'];
      
                  var currentDiv = panelTrack[1];

                  alert("connecting AJAX page show event");
                  $('div[data-role*="page"]').live('pageshow',function(event, ui){

                      panelTrack = [$(event.currentTarget.children[1].children[0]).context ,                           $(event.currentTarget.children[1].children[1]).context, $(event.currentTarget.children[1].children[2]).context];
                    $(event.currentTarget.children[1].children[0]).hide();

                    $(event.currentTarget.children[1].children[1]).show();

                    $(event.currentTarget.children[1].children[2]).hide();
                    currentDiv = panelTrack[1];

            });


            alert("now connect swipe to my page");

            //connect function to contentPanel class
            $('.mypage').live('swipeleft swiperight',function(event){
     
          alert("if I ever see this alert on 2.1 CONSISTANTLY I will be happy");

              if (event.type == "swipeleft") {
             
             
                  //do nothing, all the way to right already
                  if (currentDiv == panelTrack[2])
                      return true;
             
                  if (currentDiv == panelTrack[1])
                  { 

                      $(panelTrack[1]).hide();
                      $(panelTrack[2]).show();
                      currentDiv = panelTrack[2];       
                 
                  }
                  else
                  {
                       
                      $(panelTrack[0]).hide();
                      $(panelTrack[1]).show();
                     
                      currentDiv = panelTrack[1];
                 
                  }
             
              }
             else if (event.type == "swiperight") {
               
                //do nothing, all the way to right already
                  if (currentDiv == panelTrack[0])
                      return true;
                 
                  if (currentDiv== panelTrack[1])
                 
                  {
            
                      $(panelTrack[1]).hide();
                      $(panelTrack[0]).show();

                     
                      currentDiv = panelTrack[0];
                 
                  }
                 
                  else
                  {
                      $(panelTrack[2]).hide();
                      $(panelTrack[1]).show();
            
                      currentDiv = panelTrack[1];
                 
                  }
               
               
              }
              event.preventDefault();
          });
      });
      </script>

      </head>
     
      <body onload="init();" class="body">
        <div data-role="page" class="mypage">
            <div data-role="header" data-position="fixed" data-backbtn="false">
           <h1>Home</h1>
            </div>
    <!-- /header -->
     <div id="content" data-role="content" class="contentPanel">
     
     <div id="leftPanel" class="leftPanel">   
          
       <p>LEFT! Page content goes here.</p>

       <p>Page content goes here.</p>

       <p>Page content goes here.</p>

    </div><!-- subleft -->

    <div id="home" class="home">   
          
       <p>Center2! Page content goes here.</p>

       <p>Page content goes here.</p>

       <p>Page content goes here.</p>

    </div><!-- subleft -->


    <div id="rightPanel" class="rightPanel">   
          
       <p>RIGHT! Page content goes here.</p>

       <p>Page content goes here.</p>

       <p>Page content goes here.</p>

    </div><!-- subleft -->
     
        </div><!-- end  content -->
       
        <div id="myFooter" data-role="footer" data-position="fixed">

            <div data-role="navbar" class="nav-menu">
                <ul>
                    <li><a href="index.html" data-iconps="top"  id="home" data-icon="custom"  class="ui-btn-active ui-state-persist">My<BR/>Home</a></li>
                    <li><a href="mypage2.html" data-iconps="top" id="p2" data-icon="custom">My<BR/>p2</a></li>
                    <li><a href="p3.html"   data-iconps="p3" id="favs" data-icon="custom">My<BR/>p3</a></li>
                    <li><a  href="p4.html"   data-iconps="top" id="p4" data-icon="custom">p4<BR/>List</a></li>
                    <li><a href="p5.html"   data-iconps="top" id="p5" data-icon="custom">My<BR/>p5</a></li>
                       
                </ul>

            </div><!-- /navbar -->
        </div><!-- /footer -->
       
       
        <!-- end footer -->
        </div><!-- end jqm page -->

      </body>
    <script>pageLoad();</script>
    </html>






















































































































































































    • Topic Participants

    • elio