How to prevent jquery mobile toolbar toggle when opening a panel

Question

I have a fixed header on my jQuery mobile project that is set to data-tap-toggle="true".

<div data-role="header" data-position="fixed" data-fullscreen="true" data-id="hdr" data-visible-on-page-show="false" data-tap-toggle="true">
    <h1>My Title</h1>
</div><!-- /header -->

The header correctly toggles when tapping on the screen. The problem is that when I tap on a link to open a panel, the header also displays.

<a href="#mypanel" data-role="button" data-inline="true" data-icon="bars" id="panel_link">Test</a>

Here's my panel:

<div data-role="panel" id="mypanel" data-position="right" data-display="overlay" data-theme="b">
    <div class="ui-panel-inner">
        <p>Content</p>
    </div>
</div><!-- /panel -->

I've tried to blacklist the panel button like so:

$( document ).on( "pageinit", "#demo-page", function() {
        $("[data-role=header],[data-role=footer]").fixedtoolbar({ tapToggleBlacklist: "a, button, input, select, textarea" });
});

I've also tried to create my own click event that changes the header tapToggle option to false as well as opening only the panel.

$('#panel_link').on('click', function (event) {
    $("[data-role=header]").fixedtoolbar( "option", "tapToggle", false );
alert('test');
    $( "#mypanel" ).panel( "open" );
    event.stopPropagation();
});

@Omar, that approach works. I'm willing to go with it unless there's a better solution. — wmfox3, Jun 27 '13 at 16:22
I'm still looking for a better solution. I'm not 100% convinced about it. — Omar, Jun 27 '13 at 16:25
I couldn't come up with another solution. I wanted the header to slide in/out smoothly before opening the panel. I'll keep trying. — Omar, Jun 27 '13 at 17:27
I couldn't come with something better than the demo I've given before. — Omar, Sep 12 '13 at 17:32

score 0 · Answer 1 · edited May 23 '17 at 12:05

0

try this:

 $('#panel_link').on('click', function (event) {
        $( "#mypanel" ).panel( "open" );
        event.stopImmediatePropagation();
    });

See the difference between stopPropagation and stopImmediatePropagation jquery: stopPropagation vs stopImmediatePropagation

edited May 23 '17 at 12:05

Community

1
1

answered Jun 27 '13 at 15:20

dejavu

3,236
7
35
60

That approach causes both the toolbar and panel to briefly flash and then disappear. – wmfox3 Jun 27 '13 at 15:38
@wmfox3 can you post a jsfiddle for the problem? it will be easy to find the solution then – dejavu Jun 27 '13 at 15:39
@wmfox3 This is likely to happen because you are essentially tapping the screen, so both event will be consumed. I will search for some solution though – dejavu Jun 27 '13 at 15:42
I've not created a jsfiddle before, but here's a shot at it. http://jsfiddle.net/5MXT3/1/ – wmfox3 Jun 27 '13 at 15:45

How to prevent jquery mobile toolbar toggle when opening a panel

1 Answers1