Question

i got a client side javascript function which is triggered on a button click (basically, its a calculator!!). Sometimes, due to enormous data on the page, the javascript calculator function take to long & makes the page appear inactive to the user. I was planning to display a transparent div over entire page, maybe with a busy indicator (in the center) till the calculator function ends, so that user waits till process ends.

 function CalculateAmountOnClick() {   // Display transparent div    // MY time consuming loop!     {      }    // Remove transparent div   } 

Any ideas on how to go about this? Should i assign a css class to a div (which surrounds my entire page’s content) using javascript when my calculator function starts? I tried that but didnt get desired results. Was facing issues with transparency in IE 6. Also how will i show a loading message + image in such a transparent div?

TIA

Answer 1

Javacript to show a curtain:

function CalculateAmountOnClick () {   var curtain = document.body.appendChild( document.createElement('div') );   curtain.id = 'curtain';   curtain.onkeypress = curtain.onclick = function(){ return false; }   try {     // your operations   }   finally {     curtain.parentNode.removeChild( curtain );   } } 

Your CSS:

#curtain {   position: fixed;   _position: absolute;   z-index: 99;   left: 0;   top: 0;   width: 100%;   height: 100%;   _height: expression(document.body.offsetHeight + 'px');   background: url(curtain.png);   _background: url(curtain.gif); } 

(Move MSIE 6 underscore hacks to conditionally included files as desired.)

You could set this up as add/remove functions for the curtain, or as a wrapper:

function modalProcess( callback ) {   var ret;   var curtain = document.body.appendChild( document.createElement('div') );   curtain.id = 'curtain';   curtain.onkeypress = curtain.onclick = function(){ return false; }   try {     ret = callback();   }   finally {     curtain.parentNode.removeChild( curtain );   }   return ret; } 

Which you could then call like this:

var result = modalProcess(function(){   // your operations here });