I am trying to build a horizontal content slider using jQueryMobile.
The following code works well on Android, iOS, Chrome, and IE9, where the user can tap (or mousedown) and drag the contents left or right.
In WP7 (Mango), all that happens is the original touch, it seems, highlights the element containing the DIV, but any movement is ignored.
Content Slider Example
<!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?
Thank you in advance for your consultation.
source share