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.

<!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" />
      
    <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() {
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>

<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>

<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>

<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>

    </div>

    <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>
    </div>


    
    </div>

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

Topic Participants
elio

Why does my swipe code not trigger on Android 2.1?

Why does my swipe code not trigger on Android 2.1?

Topic Participants

elio