ajax indicator

Ajax indicators werkt als volgt:

 

Je zet een Div ( met als id: parentdiv )op je pagina die gaat fungeren als de achtergrond zolang als de indactor getoond wordt, normaal is deze div dus niet zichtbaar. Hij heeft dan ook de volgende properties:

style: width:100%; height:100%; display:none; top:0px; left:0px; z-index:5000;

Daarnaast zet je een div op je pagina ( met als id waitIndicatorDiv ) waarin de feitelijke ajax indicator ( gif image ) getoond wordt. Deze is standaard dus ook niet zichtbaar en heeft de volgende properties:

#waitIndicatorDiv

{
 font-family:Verdana;
font-size:10px;
background: transparant url(waitindicator.gif) no-repeat right;
position:absolute;
top:300px;
left:500px;
display:none;
width: 591px;
z-index:99999;

}

Door middel van z-index wordt deze dus achter de div met je standaard html inhoud geplaatstt.
Er moet dus een gebeurtenis zijn waarop de ajax indicator gedisplayed moet worden. Vaak een button. je moet dan ook die button een atribute geven naar de javascript functie die gebruikt wordt om de indicator te starten. Dit doe je in page-load:

    this.btn_Upload.Attributes.Add ("onclick", "FreezePage()");

Javascript om de indicator te starten ziet er als volgt uit:

            function FreezePage() 
            {
                document.getElementById('parentDiv').style.display = 'inline';
                ShowIndicator();
            }

            function ShowIndicator()
            {
                document.getElementById('waitIndicatorDiv').style.display = 'block';
            }

Dus van style.display="none"  gaat het naar style.display="inline" voor de achtergrond en div met de image krijgt style.display ="block" Thats all

{{opmerking.Naam}}:

{{opmerking.OpmerkingText}}

            

Saving your comment....

Naam is verplicht!
Email is verplicht!
Opmerking is verplicht!