jQuery Mobile External panels not working correctly

html, javascript, jquery, jquery-mobile

Solution

And here's a working solution: http://jsfiddle.net/Palestinian/8nM4u/

At least until this bug is solved, you should subscribe to bug report I left you in my comments on top.

Here's additional code you need for this to work correctly:

$(document).on("pagecreate", function () {
    $("[data-role=panel]").one("panelbeforeopen", function () {
        var height = $.mobile.pageContainer.pagecontainer("getActivePage").outerHeight();
        $(".ui-panel-wrapper").css("height", height + 1);
    });
});

And say hi to Omar, he made you this solution. :)

Problem

I have a frustrating issue. According to the documentation, I am allowed to have external panels: - http://demos.jquerymobile.com/1.4.2/panel-external/ - In the above example the header is inside the page, but the panels are outside the page I am also allowed to have external headers and footers: - http://demos.jquerymobile.com/1.4.2/toolbar-fixed-persistent/ Then logically I should be able to combine them: ``` <div data-role="header" data-position="fixed" data-theme="a"> <a href="#main_menu" data-transition="reveal" class="f-menu menu_control"><span>Open left panel</span></a> <h1>Info</h1> </div><!-- /header --> <div id="locale" data-role="page" data-title="Info" class="jqm-demos"> <div role="main" class="ui-content jqm-content jqm-fullwidth"> <h1>LOCALE</h1> </div><!-- /content --> </div><!-- /page --> <div id="privacy" data-role="page" data-title="Info" class="jqm-demos"> <div role="main" class="ui-content jqm-content jqm-fullwidth"> <h1>PRIVACY</h1> </div><!-- /content --> </div><!-- /page --> <div data-role="panel" id="main_menu" data-position="left" data-display="reveal" data-theme="a"> <ul data-role="listview" id="menu_contents"> <li data-role="list-divider" class="h2 ui-li-divider ui-bar-a ui-first-child"> <a href="#locale" data-transition="slide" data-rel="close" class="f-cogs">Page 1</a> </li> <li data-role="list-divider" class="h2 ui-li-divider ui-bar-a ui-first-child"> <a href="#privacy" data-transition="slide" data-rel="close" class="f-cogs">Page 2</a> </li> </ul> </div> ``` Fiddle: http://jsfiddle.net/sidouglas/qVNyf/1/ As you will see in the fiddle, the sliding animation is not the same as ( http://demos.jquerymobile.com/1.4.2/panel-external/ ). It's laggy and the height of the document is not being calculated correctly. As per another question, I tried using `<div class="ui-panel-wrapper">` in this fiddle. Still the same problem.

Original source