Solved

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

Posted on 2013-12-18
7
1,739 Views
Last Modified: 2014-01-08
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
Comment
Question by:Asrar Azmi
  • 3
  • 2
7 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39726432
<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
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 39726467
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
 

Author Comment

by:Asrar Azmi
ID: 39728494
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 54

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 39728710
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
 

Author Comment

by:Asrar Azmi
ID: 39728821
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
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 39728962
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Batch, VBS, and scripts in general are incredibly useful for repetitive tasks.  Some tasks can take a while to complete and it can be annoying to check back only to discover that your script finished 5 minutes ago.  Some scripts may complete nearly …
Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to count occurrences of each item in an array.

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question