I want to have some swipe functionality on an image gallery on the mobile version of a site I'm building, so as I've been using jQuery, I thought I'd use the jQuery Mobile swipeleft and swiperightevents. This all works fine, but I notice that when the page loads I get a the word loading appear on the page.
Is this the loading widget? And if so how can I set it so that it doesn't show?
You can turn it of with a:
$( document ).bind( 'mobileinit', function(){
$.mobile.loader.prototype.options.text = "loading";
$.mobile.loader.prototype.options.textVisible = false;
$.mobile.loader.prototype.options.theme = "a";
$.mobile.loader.prototype.options.html = "";
});
It is also good to know that this block must be initialized before jQuery Mobile is initialized inside a HEAD, like this:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script>
$( document ).bind( 'mobileinit', function(){
$.mobile.loader.prototype.options.text = "loading";
$.mobile.loader.prototype.options.textVisible = false;
$.mobile.loader.prototype.options.theme = "a";
$.mobile.loader.prototype.options.html = "";
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
Find more about this functionality here.
try this:
$(document).on("swiperight", "body", function() {
$.mobile.changePage("#page1");
$.mobile.hidePageLoadingMsg();
});
OR
$("body").on( "swipeleft swiperight", function( event ) {
$.mobile.changePage("#page1");
$.mobile.hidePageLoadingMsg();
});
however you do it, the important piece is
$.mobile.hidePageLoadingMsg();
