4

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

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

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

My HTML is below. The content of the sidebar panel is generated on pageload and display correctly, and the form submits 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?

Storm
  • 684
  • 9
  • 20
Marc Steven Plotz
  • 528
  • 7
  • 22
  • You should also add a rangeslider to your panel. Do not expect that other will do it. – Gajotres May 16 '13 at 12:29
  • The rangeslider is added to the panel dynamically on pageload. I did say that this all works perfectly. – Marc Steven Plotz May 16 '13 at 12:33
  • @MarcStevenPlotz - perhaps they actually wanted to see some code without the realization that much about how jQuery mobile works from markup. – Mark Schultheiss May 16 '13 at 13:00
  • are you modifying panel width or so? are you sure that the dynamically appended items are refreshed and styled accordingly? – Omar May 16 '13 at 13:11
  • This should answer your question . . . http://stackoverflow.com/questions/15723362/prevent-jquery-mobile-swipe-event-over-specific-element – JSdc Apr 26 '14 at 17:33

2 Answers2

0

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

if you click and hold the slider (or long-press on a touch screen) and only then move the slider, then the panel doesn't close.

But of course I would rather have a proper solution. It seems the slider move is triggering the "swipe" event, which in turn causes the panel to close.

But then, the data-swipe-close="false" should remedy that.

ngrashia
  • 9,869
  • 5
  • 43
  • 58
matthiku
  • 3,610
  • 1
  • 15
  • 21
0

Your question doesn't state which version of jquery and jquerymobile you're using. Here's an example of this working correctly with jquery 1.8.2 and jquerymobile 1.4.2

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

I also added a range input slider and a close button in 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>
SecondJon
  • 101