Home/ Questions/Q 7082533
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T07:03:57+00:00

I’m trying to put together a horizontal content slider using JQueryMobile. The following code

  • 0

I’m trying to put together a horizontal content slider using JQueryMobile.

The following code works nicely on Android, IOS, Chrome and IE9 where the user can touch (or mousedown) and drag the contents left or right.

On WP7 (Mango) all that happens is the original touch seems to highlight the item containing DIV, but any movement is ignored.

Content Slider Sample

<!DOCTYPE html>
<html class="ui-mobile">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Scroll View Test</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body class="ui-mobile-viewport">
    <div data-role="page">
        <div data-role="header">
            <h1>Content Slider</h1>
        </div>
            <div data-role="content">
            <div style="height:50px;width: 110px; overflow: hidden">
                <div id="divScroll" style="width: 500px; margin-left:0px;left: 0px; top: 0px;">
                    <div class="sliderItem" style="background-color:#A03030;float: left; width: 50px;height:50px;">Item 1</div>
                    <div class="sliderItem" style="background-color:#B03030;float: left; width: 50px;height:50px;">Item 2</div>
                    <div class="sliderItem" style="background-color:#D03030;float: left; width: 50px;height:50px;">Item 3</div>
                    <div class="sliderItem" style="background-color:#E03030;float: left; width: 50px;height:50px;">Item 4</div>
                    <div class="sliderItem" style="background-color:#F03030;float: left; width: 50px;height:50px;">Item 5</div>
                </div>
            </div>

            <div id="dbg"></div>
            <div id="dbg2"></div>

            <script type="text/javascript" language="javascript">
                var mouseIsDown = false;
                var mouseDownX = 0;
                var mouseDownMargin = 0;

                $(document).bind('vmouseup', function (event) {
                if (mouseIsDown) {
                    event.preventDefault();
                    $('#dbg').html(event.type);
                    mouseIsDown = false;
                }});

                $('.sliderItem').bind('vmousedown', function (event) {
                    event.preventDefault();
                });

                $('#divScroll').bind('vmousedown vmousemove', function (event) {
                    event.preventDefault();
                    $('#dbg').html(event.type);
                    if (event.type == 'vmousedown') {

                        mouseIsDown = true;


                        var ml = $('#divScroll').css('margin-left').replace('px', '');
                        $('#dbg2').html(ml);
                        mouseDownMargin = parseInt(ml);
                        mouseDownX = event.pageX;

                    }

                    if (event.type == 'vmousemove' && mouseIsDown) {
                        var delta = mouseDownX - event.pageX;
                        $('#dbg2').html(mouseDownMargin - delta);


                        $('#divScroll').css({ marginLeft: mouseDownMargin - delta });

                    }
                });
            </script>
        </div>
    </div>
</body>
</html>

What can I do to get this to work on WP7?

Thanks in advance for you advice.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This will not work on WP7 because the version of IE9 used by WP7 does not support mouse down / move / up events in a very nice way. What happens is that when you first place your finger on the screen, no events are fired. When you lift your finger mousedown / click / mouseup events are fired immediately in that order. This makes it impossible to implement any functionality that allows the user to manipulate / drag DOM elements.

    The only way to fix this problem is to write some native code that emulates mouse or touch events. I have had some success with this … see the following blog post:

    http://www.scottlogic.co.uk/blog/colin/2012/01/fastclick-for-wp7-improving-browser-responsiveness-for-phonegap-apps/

    However, this will not give you mousemove events. I know that Nitobi (PhoneGap) devs are looking to use this technique to emulate touch events:

    https://issues.apache.org/jira/browse/CB-112

    However, I am not sure whether this is really possible.

    • 0