Web 2.0 Busy Dialog Box

The below created code will help in showing a loading form when a busy server process is going on

it will also disable all the controls in the form so that the server process is not interpreted.

All the javascript,css codes are embedded in js and css file

   1: <LINK href="style.css" type="text/css" rel="stylesheet">

   2: <SCRIPT language="JavaScript" src="loader.js"></SCRIPT>

Style.css

 

   1: BODY 

   2: { 

   3:     PADDING-RIGHT:  0px; 

   4:     PADDING-LEFT:   0px; 

   5:     PADDING-BOTTOM: 0px; 

   6:     MARGIN:         0px; 

   7:     PADDING-TOP:    0px 

   8: } 

   9:  

  10: #BackGroundFade 

  11: { 

  12:      DISPLAY: none; 

  13:      FILTER:  alpha(opacity=80); 

  14:      LEFT:    0px; 

  15:      WIDTH:   100%; 

  16:      POSITION: absolute; 

  17:      TOP: 0px; 

  18:      BACKGROUND-COLOR: #ffffff; 

  19:      opacity: 0.8 

  20: } 

  21:  

  22: #ForeGroundActive 

  23: { 

  24:    FILTER: alpha(opacity=60); 

  25:    BORDER-RIGHT: #000000 0px solid; 

  26:    BORDER-TOP: #000000 0px solid; 

  27:    LEFT: 0px; 

  28:    BORDER-LEFT: #000000 0px solid; 

  29:    WIDTH: 300px; 

  30:    BORDER-BOTTOM: #000000 0px solid; 

  31:    POSITION: absolute; 

  32:    TOP: 0px; 

  33:    HEIGHT: 300px; 

  34:    BACKGROUND-COLOR: #ffffff;

  35:    opacity: 0.8 

  36: } 

  37:  

  38: .LoadingText

  39: {

  40:   FONT-SIZE: 11px;

  41:   COLOR: #6c7473;

  42:   FONT-FAMILY: arial

  43: }

  44:  

  45: .Text

  46: {

  47:   FONT-SIZE: 11px;

  48:   FONT-FAMILY: arial;

  49:   COLOR: #6c7473

  50: }

Loader.js

   1: var loader = new Image();

   2: loader.src = "rollera.gif";

   3:   

   4: function Loading(loadingtext)

   5: {

   6:     BackGroundFade();

   7:     Fore_ground_panel_activate(loadingtext);

   8:     

   9: }

  10:  

  11: function Fore_ground_panel_activate(loadingtext)

  12: {

  13:     var fore_ground_panel;

  14:     var w = 300; 

  15:     var h = 300;

  16:     

  17:     this.fore_ground_panel = document.createElement ('DIV');

  18:     document.body.appendChild(this.fore_ground_panel);

  19:     this.fore_ground_panel.id = 'ForeGroundActive';

  20:  

  21:     var brSize        = this.getBrowserSize();

  22:     var bodyWidth    = brSize[0];

  23:     var bodyHeight    = brSize[1];

  24:     xc = Math.round((bodyWidth/2)-(w/2))

  25:     yc = Math.round((bodyHeight/2)-(h/2))

  26:     

  27:     this.fore_ground_panel.style.left = xc + "px";

  28:     this.fore_ground_panel.style.top  = yc + "px";

  29:     this.fore_ground_panel.style.display = 'block';

  30:     var HTML = "<table border=0><tr><td><img src='" + loader.src + "'>&nbsp;&nbsp;&nbsp;&nbsp;</td><td><p class=LoadingText><b>" + loadingtext + " </b></p></td></tr>"

  31:        this.fore_ground_panel.innerHTML =HTML;

  32:        

  33:    }

  34:  

  35: function BackGroundFade()

  36: {

  37:     var back_ground_panel;

  38:     var brSize;

  39:     var bodyWidth;

  40:     var bodyHeight;

  41:             

  42:     brSize        = this.getBrowserSize();

  43:     bodyWidth    = brSize[0];

  44:     bodyHeight    = brSize[1];

  45:                 

  46:     this.back_ground_panel = document.createElement('DIV');

  47:     this.back_ground_panel.id = 'BackGroundFade';

  48:     this.back_ground_panel.style.height = bodyHeight + 'px';;

  49:     document.body.appendChild(this.back_ground_panel);

  50:     this.back_ground_panel.style.display = 'block'

  51:     

  52: }

  53:  

  54: function getBrowserSize()

  55: {

  56:     var bodyWidth    ;

  57:     var bodyHeight  ;

  58:     

  59:     bodyWidth=    document.documentElement.clientWidth;

  60:     bodyHeight    =    document.documentElement.clientHeight;

  61:     

  62:     if (self.innerHeight)

  63:     { 

  64:         // all except Explorer 

  65:         bodyWidth    =    self.innerWidth; 

  66:         bodyHeight    =    self.innerHeight; 

  67:         

  68:     }  

  69:     else if (document.documentElement && document.documentElement.clientHeight) 

  70:     {

  71:         // Explorer 6 Strict Mode          

  72:         bodyWidth    =    document.documentElement.clientWidth; 

  73:         bodyHeight    =    document.documentElement.clientHeight; 

  74:     } 

  75:     else if (document.body) 

  76:     {// other Explorers          

  77:         bodyWidth    =    document.body.clientWidth; 

  78:         bodyHeight    =    document.body.clientHeight; 

  79:     } 

  80:     return [bodyWidth,bodyHeight];        

  81:         

  82: }

  83: function LoadDefault()

  84: {

  85:     var page_screen = document.getElementById('BackGroundFade');

  86:     page_screen.style.display = 'none';

  87: }

  88: function hideSelect()

  89: {

  90:     for (j=0; j<document.forms.length; j++) 

  91:     {

  92:         var theForm = document.forms[j]

  93:         for(i=0; i<theForm.elements.length; i++)

  94:         {

  95:         alert(theForm.elements.name)

  96:             if(theForm.elements.type == "select-one") 

  97:             {

  98:             theForm.elements.style.visibility = "hidden";

  99:             }

 100:         } 

 101:     }

 102: } 

 103:  

 104:  

 105:  

 106:     

the following code will set the attribute for calling the javascript indicationg a process is going on

   1: Button2.Attributes.Add("OnClick","javascript:Loading('loading');");

function BackGroundFade() 

will create a div tag and which covers the whole form so that the user cannot click on any controls

function Fore_ground_panel_activate(loadingtext);

will create div with the loading image ...we can change the caption of the text for each button click