Wednesday, December 26, 2012

Disable Active page When loading start

Open jquerymobile.js  and find below text

<span class='ui-icon ui-icon-loading'></span>

add one div element before the span like: 
<div class='inner_loader ui-loader-verbose'>

and end it after the h1 tag, that is created after span.
and add below css in your style.css.


.ui-loader.ui-body-a{background: transparent !important;
width: 100% !important;
left: 0 !important;
top: 0 !important;
height: 100%;
margin: 0 !important;
padding: 0 !important;
}
.ui-loader.ui-body-a .inner_loader{
z-index: 99999;
position: fixed;
top:50%;
left:46%;
width:200px;
background:#222;
text-shadow:0 1px 1px #111;font-weight:normal;background-image:-webkit-gradient(linear,left top,left bottom,from( #444 ),to( #222 ));background-image:-webkit-linear-gradient( #444,#222 );background-image:-moz-linear-gradient( #444,#222 );background-image:-ms-linear-gradient( #444,#222 );background-image:-o-linear-gradient( #444,#222 );background-image:linear-gradient( #444,#222 );
moz-border-radius: .6em;
-webkit-border-radius: .6em;
border-radius: .6em;
}

and now user are not able to click any element while loading data.