The jQuery dashboard for mobile should not close.

Question

I have a simple jQuery mobile page that has a sidebar panel that opens on the left when the button in the head element is clicked. This is working correctly. The problem is that I have a form in the sidebar panel that contains the range slider, and when you move the slider to the left, the panel closes. Any idea on how to prevent this.

I tried: data-swipe-close="false" (found here )

and just to be safe: data-dismissible="false" from the same link above.

My HTML is below. The contents of the sidebar panel are generated on the page and displayed correctly, and the form is submitted correctly:

  <div data-role="page" data-type="page" id="select"> <div data-role="panel" data-theme="g" id="sidebar" data-display="overlay" data-position-fixed="true" data-swipe-close="false" data-dismissible="false"> <div id='sidebarview' data-theme='g' data-role="collapsible-set" data-inset="false" data-mini="false"></div> </div> <div id="header" data-theme="h" data-role="header" data-position="fixed"> <h3>MOBILE</h3> <a id='sidebarbutton' data-role="button" data-theme="h" href="#sidebar" class="ui-btn-left" data-icon="bars" data-iconpos="notext"></a> <a id='gpsButton' data-role="button" data-theme="h" href="javascript:void(0);" class="ui-btn-right">GPS</a> </div> <div id="content-dataview" data-role="content"> </div> <div data-role="footer" data-id="footer" data-position="fixed" data-theme="h"> <div data-role="navbar" data-theme="h"> <ul> <li><a onclick='user.logout();' href='javascript:void(0)'>Logout</a></li> </ul> </div> </div> </div> 

Any ideas?

Answer 1

I have the same problem and I found a (weak) workaround:

if you press and hold the slider (or long press on the touch screen), then move the slider, then the panel does not close.

But of course, I would prefer the right solution. It seems that the movement of the slider triggers a swipe event, which in turn causes the panel to close.

But then data-swipe-close="false" should fix it.

Answer 2

Your question does not indicate which version of jquery and jquerymobile you are using. Here an example of this works correctly with jquery 1.8.2 and jquerymobile 1.4.2

I deleted the g theme, which has a transparent background, which made the overlay odd.

I also added a range input slider and a close button on the panel in the jsfiddle example:

http://jsfiddle.net/hQguV/

 <div data-role="page" data-type="page" id="select"> <div data-role="panel" id="sidebar" data-display="overlay" data-position-fixed="true" data-swipe-close="false" data-dismissible="false"> <div id='sidebarview' data-theme='g' data-role="collapsible-set" data-inset="false" data-mini="false">This is content in #sidebarview</div> <input type="range" min="0" max="42" value="42" id="testslider"/> <a href="#" data-rel="close" class="ui-btn">Close panel</a> </div> <div id="header" data-theme="h" data-role="header" data-position="fixed"> <h3>MOBILE</h3> <a id='sidebarbutton' data-role="button" data-theme="h" href="#sidebar" class="ui-btn-left" data-icon="bars" data-iconpos="notext"></a> <a id='gpsButton' data-role="button" data-theme="h" href="javascript:void(0);" class="ui-btn-right">GPS</a> </div> <div id="content-dataview" data-role="content"> </div> <div data-role="footer" data-id="footer" data-position="fixed" data-theme="h"> <div data-role="navbar" data-theme="h"> <ul> <li><a onclick='user.logout();' href='javascript:void(0)'>Logout</a></li> </ul> </div> </div> </div>