This is a migrated thread and some comments may be shown as answers.

How can I make the loading animation be modal?

2 Answers 230 Views
Application
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 19 Dec 2012, 04:19 AM
We use the Application.showLoading() method to show the loading animation whenever we make any AJAX calls, or refresh any DataSources in our mobile web app. However, the page below the loading animation remains active while the animation is displayed. This can lead to very weird behaviour if the user touches anything there.

How can I make the loading animation be modal?

What I have tried is the following:
<div id="glass" class="glass" style="display: none;"></div>
with the following in our CSS:
.glass {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    opacity: 0.3;
    background: #fff;
}
and finally, the following utility function:
function showLoading() {
  $("#glass").show();
  app.showLoading();
}
This works very well on:
- Safari on iOS
- Chrome on Android 4.2

However, it displays an ugly white rectangle on:
- Android Browser on Android 4.2 (see attached screen shot)

I would happily throw away all of this code if there is a Kendo provided method to achieve what I want. If Kendo really does not provide this functionality, then any help in what I am doing wrong with my code would be greatly appreciated.

Thanks in advance,
David Sykes

2 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 20 Dec 2012, 08:45 AM
Hello,

You may use the loader event capturing methods in order to prevent the user from clicking the app elements. However, this won't apply any sort of a visual overlay, and buttons will still be active (but they won't execute any actions). See this example for a reference implementation. 

Hope this helps,
Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
David
Top achievements
Rank 1
answered on 07 Jan 2013, 11:36 PM
Sorry for the delay in responding. Thanks for the answer. In the end I was able to get my "glass" working correctly. The solution was to change:
position: absolute;
to:
position: fixed;
We will go with this solution for now, and look into your one should we run into any problems later.

Thanks again,
David Sykes
Tags
Application
Asked by
David
Top achievements
Rank 1
Answers by
Petyo
Telerik team
David
Top achievements
Rank 1
Share this question
or