0

In my project i have some buttons with icon its working fine but the issue is when i long press the button it remains in active state unless i press some other button can any tell what the issue and how can i solve this.
Here is the css code for btn active state.

.ui-btn-active {
border: 1px solid #ccc;
background: #B4B7BA;
font-weight: 700;
color: #fff;
cursor: pointer;
text-shadow: 0 1px 0 #EDF1F4;
text-decoration: none;
background-image: -webkit-linear-gradient(#5393c5, #6facd5);
background-image: -moz-linear-gradient(#5393c5, #6facd5);
background-image: -ms-linear-gradient(#5393c5, #6facd5);
background-image: -o-linear-gradient(#5393c5, #6facd5);
background-image: linear-gradient(#5393c5, #6facd5);
font-family: Helvetica, Arial, sans-serif  }
Neerav Shah
  • 713
  • 5
  • 18
  • 39
  • possible duplicate of [jquery mobile button state remains active in phonegap android](http://stackoverflow.com/questions/17228775/jquery-mobile-button-state-remains-active-in-phonegap-android) – Omar Jun 21 '13 at 14:07

1 Answers1

1

I encountered a similar issue and worked around it with something like this:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test App</title>

    <script type="text/javascript" src="cordova-2.8.0.js"></script>
    <script type="text/javascript" src ="assets/lib/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src ="assets/lib/jquery.mobile-1.2.0.min.js"></script>
    <link rel="stylesheet" href="assets/lib/jquery.mobile-1.2.0.css" type="text/css" />

    <script type="text/javascript" >
        $.mobile.defaultPageTransition = 'none'; // Remove default page transition
        $('div[data-role="page"]').on('pagecreate',function(event, ui){
            $('div[data-role="footer"] a', $(this)).on("taphold",function(e){
                $(this).addClass("ui-btn-active");
                 $(this).one("touchend", function(e){
                       e.preventDefault();
                       $(this).trigger("click", e.data); // Remove this if you don't want the long press to act as a click
                       $(this).removeClass("ui-btn-down-a ui-btn-active");
                       return false;
                    });
                });
           });
    </script>
</head>
<body>
    <div data-role="page" id="page-1">
        <div data-role="content">                   
            <p>Page 1</p>
        </div>
        <div data-role="footer" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a href="#page-1">Page 1</a></li>
                    <li><a href="#page-2">Page 2</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div data-role="page" id="page-2">
        <div data-role="content">           
            <p>Page 2</p>

        </div>
        <div data-role="footer" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a href="#page-1">Page 1</a></li>
                    <li><a href="#page-2">Page 2</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

You can download my Eclipse project and compiled APK here

DaveAlden
  • 30,083
  • 11
  • 93
  • 155
  • hey thanks for reply i am getting error Uncaught TypeError: Object [object Object] has no method 'live' when i google it i found that .live method has been removed from 1.9 jquery so is there any alternate method. – Neerav Shah Jun 24 '13 at 04:33
  • Replace .live() with .on() - [see here](http://stackoverflow.com/questions/14354040/jquery-1-9-live-is-not-a-function) - I updated my answer accordingly – DaveAlden Jun 24 '13 at 07:17