CODEWITHSUNDEEP
jqueryajaxjqtouch
shaiss
shaiss

Reputation: 2010

jQtouch and jquery loading overlay

I created a mobile app using jQtouch. I need to let my user know when an ajax call is loading after they've pressed a form button. So I want to load a mask and a simple loading gif.

I can get it to work on the desktop version of the app with no problem, but on the mobile with the jQtouch framework I can't.

I've tried jquery-loadmask and the jquery.loading plugin.

Anyone have any experiece with jQtouch and creating a loading notice?

Upvotes: 1

Views: 7286

Answers (3)

ColinM
ColinM

Reputation: 13936

This works for jQTouch using Zepto (haven't tested with jQuery).

HTML:

<div id="jqt">
    ...
    <div id="loading"></div>
</div>

CSS:

div#jqt #loading {
  background: rgba(0,0,0,0.5) url('../images/scanner/loading.gif') 50% 50% no-repeat;
  z-index: 999;
  position: fixed;
}

JS:

$(document).on('ajaxStart', function(){
    $('#loading').addClass('current');
});

$(document).on('ajaxStop', function(){
    $('#loading').removeClass('current');
});

Upvotes: 0

SzilardD
SzilardD

Reputation: 1751

You could use the jQuery blockUI plugin (http://jquery.malsup.com/block/). I've used it succesfully in a project and it's really easy to integrate. It works well both on iPhone and Android.

Upvotes: 0

Henrik Joreteg
Henrik Joreteg

Reputation: 1736

Unfortunately the site won't let me deep link to the relevant section, but you'll find a solution about half way down this page (Just cntr+F and search for "progress indicator"):

http://building-iphone-apps.labs.oreilly.com/ch03.html#ch03_id35817310

This isn't specific to jQTouch, but you should be able to tie it in and pre-load the loading graphic using jQTouch's init options.

Hope that helps.

Upvotes: 3

Related Questions