Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1870
  • Last Modified:

How to create Overlay Progress on the page if data is loading from database

Dear Expert,

I need to create Overlay Progress on the page if data is loading from database

Pls provide if you have some code with example.
0
Asrar Azmi
Asked:
Asrar Azmi
  • 3
  • 2
1 Solution
 
leakim971PluritechnicianCommented:
<div id="overlay" style="display:none;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1000:opacity:0.7">
  <img src="http://www.myravensburger.com/images/geschenkefinder/loading.gif" />
</div>

Open in new window


function setOverlay(state) {
     document.getElementById("overlay").style.display = state?"block":"none";
}

Open in new window

To use :
- To show it : setOverlay(true);
- To hide it : setOverlay(false);
0
 
Julian HansenCommented:
Do you just want to show a loading status image - or do you actually want to show the progress of the request?

The first is relativly straight forward - the second is a bit more complicated.
0
 
Asrar AzmiAuthor Commented:
Dear Expert ,

I need to display database loading status and back side of the overlay page should be lock
until loading status is finished.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
Julian HansenCommented:
What you need is
a) An animated gif to put in your loading overlay
b) An overlay that covers either the whole screen - or the element you are loading to - that is semi-transparent with the loading gif in the centre.

The code below illustrates the concept - the CSS shows how to style the overlay. The JQuery shows how to create and attach the overlay - and then remove it once the load operation is complete
<style type="text/css">
#overlay {
   width: 100%;
   position: absolute;
   left: 0;
   top: 0;
   opacity: 0.95;
   filter: alpha(opacity=95); 
   background: #000 url(loading.gif) center center;
   z-index: 10000;
}
</style>
$(function() {
   // Change this to whatever event you want to trigger the db load
   $('#load-db').click(function() {
      $('body')
          .prepend(
              // Create a div to cover the screen
              $('<div />')
                   // give it an id so we can remove it when done
                  .attr('id','overlay')
                   // Set its height to cover the document
                  .height($(document).height())
           );
      // Do the AJAX call to the backend load. Change as per your app
      $.post('loadurl.php',{parameter1: 1, parameter2: 2}, function(resp) {
          // remove the overlay
          $('#overlay').remove();
          // handle rest of completion here
      });
   });
});

Open in new window

0
 
Asrar AzmiAuthor Commented:
Dear Julianh ,

Good day
Thanks for quick reply
actually i need overlay on the page in the middle we have Tracking website when we click on the particular vehicle icon then data come from database like Latitude,Longitude and then it create point ( marker on google map ) during this we need to display overlay process on the page in the middle and web site should be lock on back
Note : our website in asp.net with vb.net

Please provide us complete code.
0
 
Julian HansenCommented:
Please provide us complete code.
Complete code was provided as far as knowlege of your situation was provided. Comments were also provided to show what needs to change.

The code provided will "lock" the background page". Here is a sample that takes the code above and a loading icon generated here
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
   // Change this to whatever event you want to trigger the db load
   $('#load-db').click(function() {
      $('body')
          .prepend(
              // Create a div to cover the screen
              $('<div />')
                   // give it an id so we can remove it when done
                  .attr('id','overlay')
                   // Set its height to cover the document
                  .height($(document).height())
           );
      // Do the AJAX call to the backend load. Change as per your app
      $.post('loadurl.php',{parameter1: 1, parameter2: 2}, function(resp) {
          // remove the overlay
          //  $('#overlay').remove();
          // handle rest of completion here
      });
   });
   $('body').on('click','#overlay',function() {
		$('#overlay').remove();
   });
});
</script>
<style type="text/css">
#overlay {
   width: 100%;
   position: absolute;
   left: 0;
   top: 0;
   opacity: 0.80;
   filter: alpha(opacity=95); 
   background: #000 url(loader.gif) no-repeat center center;
   z-index: 10000;
}
</style>
</head>
<body>
<h1>My Vehcile Tracking page</h1>
<p>Some arbitary text to make the page look interesting</p>
<p>Some arbitary text to make the page look interesting</p>
<p>Some arbitary text to make the page look interesting</p>
<input type="button" name="fred" id="load-db" value="Fetch Data" />
</body>
</html>

Open in new window

Working sample here

To give a full sample for your case would require more information than you have provided - the above should be sufficient for you to adapt to your requirements.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now