jQuery Mobile: Open EXTERNAL panel on load

Question

I'm stucked in this: How can I make my external left panel to be open by default.

I'm defining the external panel like this:

$(document).on('pagebeforecreate', function () {
    $("#left_sidebar").panel().enhanceWithin();
});

And open it after init:

$(document).on('pagebeforeshow', function() {
    $("#left_sidebar").panel( "open");    
});

Actually it opens the sidebar but the page somehow show over it. All is working fine if I define my panel in the page.

Any ideas where I am wrong?

Answer 1

Some parts of the panel probably can't be calculated on pagebeforecreate, since the browser does yet know where every element will be and how.

You can probably fix this by putting the panel initialization in to the pagebeforeshow and if the initialization is visible on pageshow, delay the page show.