Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2013-12-18
7
Medium Priority
?
1,837 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 59

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
Not sure which OpenStack Certification to get?

So you’ve realized you might want to get certified in OpenStack, but you’re not sure what the benefits might be or even which one you should take. You know there are several certification courses you can choose from, but how do you know which one is right for you?

 
LVL 59

Accepted Solution

by:
Julian Hansen earned 1500 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 59

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
This article will show, step by step, how to integrate R code into a R Sweave document
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…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

688 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