Jquery Mobile 1.4 external panel do not open after navigating to other page

StackOverflow https://stackoverflow.com/questions/21722211

Question

We are developing an mobile application using jquery mobile and apache cordova. After migrating to jquery mobile 1.4.0 we switched to external panel but there is a problem with the panel.

There is a simple example of the problem in http://jsfiddle.net/Q58MZ/3/

To reproduce the problem you must: 1 click on page1 from the menu link 2 click on page2 from the menu link 3 click on page1 from the menu link 4 click on page2 from the menu link 5 click on "GO TO PAGE 1" link in the content

Then the menu wont open it will add classes that its open but it wont open.

Here is the sample code to reproduce it:

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>  
    <script>
        $(document).ready(function() {
            $.mobile.defaultPageTransition = 'none';
            $("#mypanel").panel();
        });
        $(document).bind('panelbeforeopen', function(e, data) {
            console.log("before open");
        });
        $(document).bind('panelbeforeclose', function(e, data) {
            console.log("before close");
        });
    </script>
</head>
<body>
    <div data-role="panel" id="mypanel">
        <a href="#page1">page1</a>
        <br />
        <a href="#page2">page2</a>
    </div>
    <div data-role="page" id="page0">
        <div data-tap-toggle="false" data-role="header" >
            <a href="#mypanel">menu</a>
            <h1>PAGE 0</h1>
        </div>
        <div data-role="content"> 
            PAGE 0
        </div>
        <div data-tap-toggle="false" data-role="footer" >
        </div>
    </div>
    <div data-role="page" id="page1">
        <div data-tap-toggle="false" data-role="header" >
            <a href="#mypanel">menu</a>
            <h1>PAGE 1</h1>
        </div>
        <div data-role="content"> 
            PAGE 1
        </div>
        <div data-tap-toggle="false" data-role="footer" >
        </div>
    </div>
    <div data-role="page" id="page2">
        <div data-tap-toggle="false" data-role="header" >
            <a href="#mypanel">menu</a>
            <h1>PAGE 2</h1>
        </div>
        <div data-role="content"> 
            PAGE 2
            <a href="#page1">GO TO PAGE 1</a>
        </div>
        <div data-tap-toggle="false" data-role="footer" >
        </div>
    </div>
</body>

The strange thing is that when I navigate through the panel links the panel works but when I click to link that is not in the panel it wont open anymore. We tried also with $.mobile.changePage and the new one with the :pagecontainer but it is the same. If someone have similar problem please let me know how he fix it. Thanks in advance.

Was it helpful?

Solution

Omar is right the $.mobile.defaultPageTransition = 'none'; is causing the problem when I removed it everything works.

OTHER TIPS

EDIT: It's fixed in jquery mobile 1.4.2, see https://github.com/jquery/jquery-mobile/issues/6650

Thanks to the hint from Cvetan I was able to solve this problem using a custom animation:

.dummy.in{}
.dummy.out{}
.in{-webkit-animation-timing-function: ease-out;-webkit-animation-duration: 0ms;-moz-animation-timing-function: ease-out;-moz-animation-duration: 0ms;}
.out{-webkit-animation-timing-function: ease-in;-webkit-animation-duration: 5ms;-moz-animation-timing-function: ease-in;-moz-animation-duration: 5ms;}

Then I've told jqm to use this transition as default with:

$.mobile.defaultPageTransition = 'dummy';

And thats it, no visible page transition animation and a fully working panel.

    <style type="text/css">
        .ui-panel-dismiss{display:none;}
        #p1, #p2{margin-left:17em;}
    </style>
    <script id="panel-init">
    $(function() {
        $( "body>[data-role='panel']" ).panel();
    });
            $(function(){$("#sidebar").panel();});
            $(document).on("pageshow", ":jqmData(role=page)", function() {you
                 $("#menu").panel("open");
    });
    </style>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top