Solved

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

Posted on 2013-12-18
7
1,678 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 51

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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 51

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 51

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

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.
Learn the basics of if, else, and elif statements in Python 2.7. Use "if" statements to test a specified condition.: The structure of an if statement is as follows: (CODE) Use "else" statements to allow the execution of an alternative, if the …
Learn the basics of while and for loops in Python.  while loops are used for testing while, or until, a condition is met: The structure of a while loop is as follows:     while <condition>:         do something         repeate: The break statement m…

759 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now