How to show ajax loading gif above the page using javascript?

JavaScript
1

how to show ajax loading gif above the page so that no widget in the page is accessible but can see the widgets and the loading gif ,above all, in the page.
How can this be done in Javascript??

Thanks in advance,
Durga prasad.

2

Hey,
I assume you know how Ajax works and know the basics of javascript.

Make a Div with the Image tag inside it, and make it hidden.

<div id='loading' style='display: none'><img src="loading.gif" title="Loading" /></div>

And using javascript you need track the request.

For example.


<script language='javascript' type='text/javascript'>
//Before starting ajax request display the div (paste it in  the beginning of your ajax request function
var loadingdiv = document.getElementById('loading');
loadingdiv.style.display = "block";

//execute the code below after the ajax request is complete
var loadingdiv = document.getElementById('loading');
loadingdiv.style.display = "none";
</script>
3

hi thanks for quick response…
yeah thats fine for normal div.
but i want to show the transparent div above the page .
User will see all the widgets and contents of the page but he cant access them.
can it be done through z-index?if it is…i dontknow much about that…please explain how to do it?

Thanks in advance,
Durga prasad.

4

The following page demos the technique that you’re after.
http://www.pixeldepth.net/EE/Overlay/overlay.html

The code that you need is seen by viewing the page source.

5

Also fading in the overlay makes the effect even nicer, you can find fade in effects with some of the popular js libraries.