Phonegap - Create CSS Loading Screen

[help desk]

I am using Phonegap / Cordova and am currently working in Android.

I have several pages that create many DOM objects and it takes time for the page to load. I am trying to create a "Loading..." screen so the user isn't looking at a black screen for some time.

I thought maybe CSS would be the best for this but I am not able to get it to show up at all.

Here is the script I am trying to use

http://stackoverflow.com/questions/1964839/jquery-please-wait-loading-animation

So I have my gif animation and I placed this code at the bottom of the html page

<div class="modal"><!-- Place at bottom of page --></div>

I then placed this code in my css file

.modal {
display:    none;
position:   fixed;
z-index:    1000;
top:        0;
left:       0;
height:     100%;
width:      100%;
background: rgba( 255, 255, 255, .8 ) 
            url('../img/loader.gif') 
            50% 50% 
            no-repeat;
}

/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading {
overflow: hidden;   
}

/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modal {
display: block;
}

I then placed this code at the start of my application .js file

$("body").on({
ajaxStart: function() { 
    $(this).addClass("loading"); 
},
ajaxStop: function() { 
    $(this).removeClass("loading"); 
}    
});

When I test the code I do not get the css layer or the gif animation, just the usual black screen as my DOM objects are being populated.

Is this type of loading screen usable within Phonegap?

Any help would be much appreciated.

Thanks.

[help desk]

Also I just noticed that when I go to the jsfiddle test page from that example link, the JQuery library is set to 1.7.2, I am using the newest, 2.0.3. When I change the library in jsfiddle then the example no longer works. I am assuming some part of the code is depreciated?

[jcesarmobile]

From jquery site

AJAX events should be attached to document

As of jQuery 1.9, the global AJAX events (ajaxStart, ajaxStop, ajaxSend, ajaxComplete, ajaxError, and ajaxSuccess) are only triggered on the document element. Change the program to listen for the AJAX events on the document. For example, if the code currently looks like this:

$("#status").ajaxStart(function(){ $(this).text("Ajax started"); });
Change it to this:

$(document).ajaxStart(function(){ $("#status").text("Ajax started"); });

[help desk]

Thank you very much. Problem solved.

On Sunday, 25 August 2013 13:04:02 UTC-7, help desk wrote: