Home/ Questions/Q 7552001
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T10:38:49+00:00

I’m using jquery mobile 1.0 in combination with swipejs. The swipejs library is being

  • 0

I’m using jquery mobile 1.0 in combination with swipejs. The swipejs library is being used to allow for mobile swipe gesture on a image carousel. However, I’ve encountered an issue on Android 2.2.3 (Motorola Droid) and other Android devices where select lists (on the same page as swipejs) simply don’t work. The select lists appear but the native options menu’s don’t pop up, clicking them simply does nothing. I was able to not only narrow it down to the swipejs, but also to a particular line within swipejs.

style.webkitTransform = 'translate3d(' + -(index * this.width) + 'px,0,0)';

It appears that the transalate3d css behavior somehow interferes with jquery mobile select lists. I’ve found numerous reports of the fragility of jquery mobile select lists on Android (https://github.com/jquery/jquery-mobile/issues/1051 ). And have been able to create a fairly simple sample page the exhibits this behavior. My fix was to alter the translate3d to translate in the swipejs library itself. But I’m wondering if someone with a better understanding of what translate3d does and how that might effect jquery mobile might be able to proprose a better solution or is this a bug with jqm or swipejs?

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="apple-touch-icon" href="/images/mobile/homeIcon.png" />
    <link rel="apple-touch-startup-image" href="/images/mobile/splash.png" />
    <link href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" rel="Stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).bind("mobileinit", function () {
            $.mobile.ajaxEnabled = false;
        });

    </script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
</head>
<body>
    <div data-role="page" id="main">
        <header data-role="header">
        </header>
        <div data-role="content">
            <div data-role="fieldcontain">
                <label for="select-choice-1">
                    Shipping method:</label>
                <select name="select-choice-0" id="select-choice-1" data-theme="a">
                    <option value="standard">Standard: 7 day</option>
                    <option value="rush">Rush: 3 days</option>
                    <option value="express">Express: next day</option>
                    <option value="overnight">Overnight</option>
                </select>
            </div>
            <div id="divProductImagesCarousel">
                <ul>
                    <li><a href="image_0.jpg">
                        <img width="250" height="250" src="image_0.jpg" alt="Product Image" style="margin-right: 50px;" />
                    </a></li>
                    <li><a href="image_1.jpg">
                        <img width="250" height="250" src="image_1.jpg" alt="Product Image" style="margin-right: 50px;" />
                    </a></li>
                    <li><a href="image_2.jpg">
                        <img width="250" height="250" src="image_2.jpg" alt="Product Image" style="margin-right: 50px;" />
                    </a></li>
                    <li><a href="image_3.jpg">
                        <img width="250" height="250" src="image_3.jpg" alt="Product Image" style="margin-right: 50px;" />
                    </a></li>
                    <li><a href="image_4.jpg">
                        <img width="250" height="250" src="image_4.jpg" alt="Product Image" style="margin-right: 50px;" />
                    </a></li>
                    <li><a href="image_5.jpg">
                        <img width="250" height="250" src="image_5.jpg" alt="Product Image" style="margin-right: 50px;" />
                    </a></li>
                    <li><a href="image_6.jpg">
                        <img width="250" height="250" src="image_6.jpg" alt="Product Image" style="margin-right: 50px;" />
                    </a></li>
                    <li><a href="image_7.jpg">
                        <img width="250" height="250" src="image_7.jpg" alt="Product Image" style="margin-right: 50px;" />
                    </a></li>
                    <li><a href="image_8.jpg">
                        <img width="250" height="250" src="image_8.jpg" alt="Product Image" style="margin-right: 50px;" />
                    </a></li>
                    <li><a href="image_9.jpg">
                        <img width="250" height="250" src="image_9.jpg" alt="Product Image" style="margin-right: 50px;" />
                    </a></li>
                </ul>
            </div>
        </div>
    </div>
    <script src="https://raw.github.com/bradbirdsall/Swipe/master/swipe.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var productImagesCarousel = document.getElementById('divProductImagesCarousel');
            window.mySwipe = new Swipe(productImagesCarousel);          
        });

    </script>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You don’t need a swipe library when using jQuery Mobile. You can register event handlers to the swipeleft and swiperight events:

    $(document).delegate('#divProductImagesCarousel', 'swipeleft swiperight', function (event) {
    alert('You just ' + event.type + 'ed!');
});
    • 0