2 Replies Latest reply: Nov 13, 2012 3:25 AM by Tom Petrus RSS

    Show Progress Bar while only on Page Load.

    Jitendra
      Hi Experts,

      I want to show progress bar every time when page loads.

      Progress bar is coming on the page. but it is not going off after page is loaded.
      Below is the code which i added for the Progress bar.
      //written on Header Text of Page
      <script type="text/javascript">
      <!--
      function html_Submit_Progress(pThis){
      $x_Show('AjaxLoading');
      window.setTimeout('$s("AjaxLoading",$x("AjaxLoading").innerHTML)', 100);
      }
      
      //-->
      </script>
      
      //written on footer text of Page
      
      <style> #AjaxLoading{padding:5px;font-size:18px;width:200px;text-align:center;left:20%;top:20%;position:absolute;border:0px solid #666;}
      </style>
      <div id="AjaxLoading" style="display:none;"><br /><img src="#APP_IMAGES#progress_bar.gif" id="wait" /></div>
      
      //called the function Execute on Page Loads  
      html_Submit_Progress(this);
      Progress bar is continuously showing on the page after page is loaded.

      I want only to show only page loads.


      Please help me .


      Apex Version : Apex 4.1
      DB Version : 10g


      Regards,
      Jitendra
        • 1. Re: Show Progress Bar while only on Page Load.
          Mindmap
          Hello,

          Please check this Example App - that you can download.
          http://apex.oracle.com/pls/apex/f?p=19914:50:0::NO:::

          You can also check this Loading Image plugin.
          http://apex-plugin.com/oracle-apex-plugins/dynamic-action-plugin/loading-icon_81.html


          Best Regards,
          Fateh
          --------------------------
          • 2. Re: Show Progress Bar while only on Page Load.
            Tom Petrus
            Hide the loader element when the page has loaded. Put this in the javascript section
            $(document).ready(function(){ $x_Hide('AjaxLoading'); });
            Or put it in the page load section
            $x_Hide('AjaxLoading');
            Or create a dynamic action which fires on page load, select a hide action, and use a jQuery selector to target '#AjaxLoading' as an affected element.