[SOLVED] loading cover <div

[Dorky]

im looking for a way to cover the screen with a translucent full screen <div while the page loads. i have spent most of my time on php because i dont intend to use a lot of jscript but i guess i should start learning it for the limited use i do make of it. any help would be greatly appreciated. also i need this to be jscript activated so if jscript is turned off it just loads the page in plain view.

[Maq]

I had to do something recently like this for work but not for the duration of the page load.  You can create a div containing the following properties, or something of the sort:

 

div#grayout {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 99;
    display: none;
    background-color: black;
    filter: alpha(opacity=40);
    opacity: 0.8;
}

 

You can use native JQuery methods to show and hide the div before and after page load.

 

i have spent most of my time on php because i dont intend to use a lot of jscript

 

May I ask why not? 

[Dorky]

• even the major name brands like hulu cause problems on my browser
  
• google uses a linx browser standard to index pages and will cost you for having to much of it
  
• a lot of what people use jscript for can be done with php and or css, and is much faster and not browser dependent
  

what is the dif between jscript and jquery

i understand i would need to use a css div, its the use of jscript that is illusive to me. i tried to use a few things i found but they did not work as promised. also they looked like the belonged in the head but suggested to put them inline with the element. after trying both none of it worked.

[Dorky]

http://studio378d.com if you read the source you can see the 3rd party jscript and css used to create the loading screen. the instructions say to put it right after the loading div but it doesnt work. i put it in the head, still doesnt work. this guy comes up as the first result on google when searching for "javascript loading screen"

 

http://www.andrewpeace.com/javascript-css-loading-screen.html

<script type='text/javascript'>
  document.getElementById(\"loading\").className = \"loading-visible\";
  var hideDiv = function(){document.getElementById(\"loading\").className = \"loading-invisible\";};
  var oldLoad = window.onload;
  var newLoad = oldLoad ? function(){hideDiv.call(this);oldLoad.call(this);} : hideDiv;
  window.onload = newLoad;
</script>

[Dorky]

ok, so i guess nobody knows.

[Dorky]

well i got it working. thx to all of you that helped.

[Maq]

well i got it working. thanks to all of you that helped.

 

Hey sorry, I was leaving work and couldn't respond.

 

Glad you got it working, if you don't mind sharing your final code for others to reference that would be great.

 

JScript is something entirely different than Javascript, although similar.  I would suggest looking it up in wikipedia, as they can provide a better explanation than I.  JQuery is a framework for Javascript that, IMO, is the most popular of frameworks.  Hope that helps.

[Dorky]

well i got it working. thanks to all of you that helped.

 

Hey sorry, I was leaving work and couldn't respond.

 

Glad you got it working, if you don't mind sharing your final code for others to reference that would be great.

 

JScript is something entirely different than Javascript, although similar.  I would suggest looking it up in wikipedia, as they can provide a better explanation than I.  JQuery is a framework for Javascript that, IMO, is the most popular of frameworks.  Hope that helps.

wow ok im retarded lol. i thought jscript was just short for javascript. thx for the correction. didnt realize all the versions. i will indeed after this post do a search to figure out the dif. the link i left was to the page i got the script and my issue was a z-index oversight. thx for checking back.

[Maq]

well i got it working. thanks to all of you that helped.

 

Hey sorry, I was leaving work and couldn't respond.

 

Glad you got it working, if you don't mind sharing your final code for others to reference that would be great.

 

JScript is something entirely different than Javascript, although similar.  I would suggest looking it up in wikipedia, as they can provide a better explanation than I.  JQuery is a framework for Javascript that, IMO, is the most popular of frameworks.  Hope that helps.

wow ok im retarded lol. i thought jscript was just short for javascript. thanks for the correction. didnt realize all the versions. i will indeed after this post do a search to figure out the dif. the link i left was to the page i got the script and my issue was a z-index oversight. thanks for checking back.

 

Hehe, yeah they all sound similar.  JQuery is really nice if the methods do exactly what you want although most of the documentation isn't very verbose.  Other than that I love the framework, powerful, easy to use, low learning curve and really cuts the code down.

 

Hmm, if you were having trouble with the z-index than the div was probably layered below your main content.