how to disable the screen on data load?

Question

hi, we are trying to show a loading image while the data is loading from the database. we are using AJAX calls for retrieving the data. Currently we are able to display that image. what we need now is to disable the entire screen and show only the loading image while the data is loading.

is there any ready made solution to this??? i hope there are lot of frameworks which can do this. Please provide relevant pointers.

Thanks.

Answer 1

This can be done by creating a div(transparent) and overlayed above all the elements.

   var freezeDiv = document.createElement("div");
   freezeDiv.id = "freezeDiv";
   freezeDiv.style.cssText = "position:absolute; top:0; right:0; width:" + screen.width + "px; height:" + screen.height + "px; background-color: #000000; opacity:0.5; filter:alpha(opacity=50)";    
   document.getElementsByTagName("body")[0].appendChild(freezeDiv );

Cheers