Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

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

Semi-Black Background while loading page

I need help with some html or javascript code that when a user presses the submit button, the web page becomes semi-black (somewhat transparent) with a loading image being shown until the page loads. Thanks in advance.
0
abgtemp
Asked:
abgtemp
  • 2
  • 2
  • 2
1 Solution
 
fsze88Commented:
like this?
<SCRIPT TYPE="text/javascript">

function setbg(color){
  document.bgColor=color;
  document.body.style.backgroundColor=color;
}

function blurme(){
  var divWidth;
  var divHeight;
  document.body.style.backgroundColor='#E0E0E0'	;
  divWidth = document.getElementById("loading").style.width;
  divHeight = document.getElementById("loading").style.height;
  
  divWidth = parseInt(divWidth.substr(0,divWidth.length-2));
  divHeight = parseInt(divHeight.substr(0,divHeight.length-2));
  
  document.getElementById("loading").style.left = (screen.width - divWidth)/2;
  document.getElementById("loading").style.top = (screen.height - divHeight)/2;
  
  document.getElementById("loading").style.display='block';
}
function unblurme(){
  document.body.style.backgroundColor='white'	;
  document.getElementById("loading").style.display='none';
}
</SCRIPT>

<BODY onload="blurme();" onunload="unblurme();">
<div id="loading" style="position:absolute;z-index:0;visibility:visible; display:none; left:130; top:160; width:300; height:228; border-width:0; border-style:no;">
<table border=2 bgcolor="#12bb56">
	<tr><td>
Hello,<br/>
Please place you image tag here!....
</td></tr>
</table>
</div>

<form>
	<input type="button" onclick="blurme();" value="blur me!">
	<input type="button" onclick="unblurme();" value="unblur me!">
</form>


<script language="javascript">
unblurme();
</script>
</body>

Open in new window

blur.txt
0
 
Michel PlungjanIT ExpertCommented:
0
 
abgtempAuthor Commented:
Thank you both for the quick response. FSZE88's response is almost exactly what I am looking for. The only thing is that I'm not looking for actual background color to change to a transparent semi-black. I'm looking for the transparent semi-black color to be an overlay on the page. Similar to how it is done in this lightbox example when you click on a picture. (http://www.lokeshdhakar.com/projects/lightbox/)   I am bumping the points up on the question because of the initial quick response.
0
Independent Software Vendors: 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!

 
Michel PlungjanIT ExpertCommented:
First link on my google suggestion:

http://malsup.com/jquery/block/#demos
0
 
fsze88Commented:
code snippet should having same backgroup color as you want
I tested it as is http://www.lokeshdhakar.com/projects/lightbox/
<SCRIPT TYPE="text/javascript">

function blurme(){
  var divWidth;
  var divHeight;
  document.body.style.backgroundColor='#FFFFFF' ;
  document.body.style.backgroundcolor='transparent';

  document.body.style.backgroundImage="url(http://www.lokeshdhakar.com/projects/lightbox/overlay.png)"
  divWidth = document.getElementById("loading").style.width;
  divHeight = document.getElementById("loading").style.height;

  divWidth = parseInt(divWidth.substr(0,divWidth.length-2));
  divHeight = parseInt(divHeight.substr(0,divHeight.length-2));

  document.getElementById("loading").style.left = (screen.width - divWidth)/2;
  document.getElementById("loading").style.top = (screen.height - divHeight)/2;

  document.getElementById("loading").style.display='block';
}
function unblurme(){
  document.body.style.backgroundColor='white'   ;
  document.body.style.backgroundImage="url(http://www.lokeshdhakar.com/projects/lightbox/blank.gif)"
  document.getElementById("loading").style.display='none';
}
</SCRIPT>

<BODY ><!--onload="blurme();" onunload="unblurme();"-->

<FONT color="back">testing</font><br/>
<FONT color="white">testing</font><br/>
<FONT color="yellow">testing</font><br/>

<FONT color="red">testing</font><br/>
<FONT color="green">testing</font><br/>
<FONT color="blue">testing</font><br/>

<form>
        <input type="button" onclick="blurme();" value="blur me!">
        <input type="button" onclick="unblurme();" value="unblur me!">
</form>

<div id="loading" style="position:absolute;z-index:0;visibility:visible; display:none; left:130; top:160; width:300; height:228; border-width:0; border-style:no;">
<table border=2 bgcolor="#12bb56">
        <tr><td>
Hello,<br/>
Please place you image tag here!....
</td></tr>
</table>
</div>


</body>

Open in new window

0
 
abgtempAuthor Commented:
Thanks mplungjan for the link. I saw several different examples similar to this, but I need help with a code snippet.

Fsze88, unless I am doing something wrong, this is only changing the color of the background, so my images are in front of the dark background. I am looking for the dark transparent overlay to actually cover the page and not just change the color the background page. I found a similar post to this http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_22951017.html
0

Featured Post

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

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