Menu
It seems like jQuery mobile is appending a loading message at the start up page. I really don't know what's going on but consider the following simple snippet:
<!DOCTYPE html> <html> <head> <title>sadFace</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> <meta charset="utf-8" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <h1>;__;</h1> </body> </html> I even have to scroll down to see the loading message. So I thought it might happen cause I'm not following the typical jQuery mobile page anatomy but:
<!DOCTYPE html> <html> <head> <title>Page Title</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>;_;</h1> </div><!-- /header --> <div data-role="content"> <p>Same shit, different page.</p> </div><!-- /content --> <div data-role="footer"> <h4><a href="http://www.google.com/pacman/">need cookies :C</a></h4> </div><!-- /footer --> </div><!-- /page --> </body> </html> the same. I'm totally stunned by this behaviour. I also test jQuery1.0rc2 with the same result even though I started my project from last week and it looks fine. What the hell is going on <.<
Looking up in jQuery Mobile' js I think this initializePage: function() is responsible for the message. I could comment out
//cue page loading message $.mobile.showPageLoadingMsg(); or set autoInitializePage: false but I rather prefer a solution which is not involving a modified jQuery file (unless it's a bug).
248
The page loading widget handles the task of displaying the loading dialog when jQuery Mobile pulls in content via Ajax. It can also be displayed manually for custom loading actions using the $.mobile.loadinghelper method (See the global method docs).
jQuery Mobile is designed to work with standard page link conventions and layers the Ajax navigation on top for maximum compatibility. Links You can link pages and assets as you normally would, and jQuery Mobile will automatically handle page requests in a single-page model, using Ajax when possible.
Linking pages jQuery Mobile is designed to work with standard page link conventions and layers the Ajax navigation on top for maximum compatibility. Links You can link pages and assets as you normally would, and jQuery Mobile will automatically handle page requests in a single-page model, using Ajax when possible.
In either situation, jQuery Mobile updates the page's URL hash to enable Back button support, deep-linking and bookmarking. It's important to note that if you are linking from a mobile page that was loaded via Ajax to a page that contains multiple internal pages, you need to add a rel="external"or data-ajax="false"to the link.
You have to add the CSS too, then it will be fine:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> In detail:
It always puts the following HTML at the bottom of your body:
<div class='ui-loader ui-body-a ui-corner-all'><span class='ui-icon ui-icon-loading spin'></span><h1></h1></div> This is the relevant CSS (so maybe you can play with it yourself if you want)
.ui-loading .ui-loader { display: block; } .ui-loader { display: none; position: absolute; opacity: .85; z-index: 100; left: 50%; width: 200px; margin-left: -130px; margin-top: -35px; padding: 10px 30px; } The function showPageLoadingMsg adds the CSS class '.ui loading' to the HTML tag and then it becomes visible
170
You can stop the autoInitializePage by using the below BEFORE you load the jquery-mobile library
jQuery(document).on("mobileinit", function() { jQuery.mobile.autoInitializePage = false; }); More info here: http://api.jquerymobile.com/global-config/
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
