How to control Loading panel using master page and without using AJAX

2.3k Views Asked by At

I have an asp.net project and I want to show the progress image (GIF) without using AJAX and using simple java-script DIV magic.

All I want to do is to put one div (which show animation clock while page loading in progress) in master page (asp.net master page so I need not to repeat the code on every content pages) and show it when page load is in progress.

I hope your understand what I want to do.

Thanks,

2

There are 2 best solutions below

0
Imdad On

make 2 sections in your document's body

<div id="progress">
// Code for gif image
</div

<div id="content" style="display:none;">
// Whole page content
</div>

And after that include this javascript. Not in header

<script>
  document.getElementById("progress").style.display = 'none';
  document.getElementById("content").style.display = 'block';
</script>

If you know jQuery you can do similarly on $(document).ready() event

1
sp_m On

You can achieve like this

<body style="background-color:#FFFFFF;" onLoad="init()">


    <div id="loading" style="position:absolute; width:200px; height:163px; text-align:center;top:310px; left:487px;">
    <img src="images/loading.gif" border=0 style="margin:38px"/>
</div>
 <script>
 var ld=(document.all);
  var ns4=document.layers;
 var ns6=document.getElementById&&!document.all;
 var ie4=document.all;
  if (ns4)
    ld=document.loading;
 else if (ns6)
    ld=document.getElementById("loading").style;
 else if (ie4)
    ld=document.all.loading.style;
  function init()
 {
 if(ns4){ld.visibility="hidden";}
 else if (ns6||ie4) ld.display="none";
 }
 </script>