Solved

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

Posted on 2013-12-18
7
1,752 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 55

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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 55

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 55

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

The New “Normal” in Modern Enterprise Operations

DevOps for the modern enterprise offers many benefits — increased agility, productivity, and more, but digital transformation isn’t easy, especially if you’re not addressing the right issues. Register for the webinar to dive into the “new normal” for enterprise modern ops.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Add or delete table rows 10 53
Asp in server side with Mssql Server 7 4 27
removing a class in javascript 4 48
ASP.NET Content Page 3 27
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 …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to dynamically set the form action using jQuery.

856 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