0

I have noticed with a webview app I created that with slower devices the jQuery mobile panels I have created within my site will display briefly at the bottom of the body when the webview first loads, but then disappears when fully loaded.

I was wondering if there was a way with jQuery mobile to prevent that.

If there is no way to do it within jQuery mobile my idea is to assign the panel initially with a display: none

HTML

<div data-role="panel" id="this_panel" data-display="overlay" style="display: none">

And then with jQuery apply a display: block when the button used to display the panel is clicked like

jQuery

$(document).on('click', '#panel_button', function() {
    $('#this_panel').show();
})

UPDATE

So I think I found a pretty good solution to keep it as clean as possible while the page is loading. Since the Panels work off of <li> lists. When the page initially loads and its a slower device you see the panel html initially at the bottom of the page briefly before the CSS applies to it which then hides it.

What I did was put the panel container like <div data-role="panel" id="tickets_cog_panel" data-display="overlay"></div>, but then with jQuery I load the html through $('#tickets_cog_panel').html('html here'). Since jQuery has to wait to load until the content is fully loaded it loads much cleaner.

Cesar Bielich
  • 4,754
  • 9
  • 39
  • 81

1 Answers1

0

Q: I was wondering if there was a way with jQuery mobile to prevent that?

A: Unfortunately not, jQuery Mobile is notorious for its bugs and you will probably never see them fixed (we are talking about dead framework).

The usual answer is simple, implement a splash screen.

Hide it on mobileinit event.

$( document ).on( "mobileinit", function() {


});

If you are still facing even with mobileinit event you should use pageshow event instead.

Use Cordova splash screen instead.

Another approach is to hide it as you previously stated and enable it again on mobileinit or pageinit event.

Gajotres
  • 57,309
  • 16
  • 102
  • 130