11548 sujets

JavaScript, DOM et API Web HTML5

Comment creer un calque plein ecran? (largeur et hauteur utile)

bonsoir.

je galere pour trouver comment faire un calque qui occupe toute la taille de ma page php (resolution ecran + au dela) pendant que celle ci se charge
puis disparait une fois chargée.

il y aurait-il quelq'un pour me souffler la soluce?

merci
Tu veux faire un div qui remplit toute la taille de la page ?
Renseigne-toi sur document.body.offsetWidth et HEight pour connaître la taille de l'espace utile.
ok, alors j'ai utilisé un code que j'ai essayé de modifier mais je n'y arrive pas.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<style type="text/css">
<!--   
#cache {
    position:absolute; 
    top:0px; 
    z-index:0px; 
    visibility:hidden;
    filter:alpha(opacity=60);
	  -moz-opacity: 0.6;
	  opacity: 0.6;
    width:1024px; 
    height:100%; 
    background-color: white;
    text-align:center;
    vertical-align:middle;
    layer-background-color: white ;
    margin-left:0px;
    margin-right:0px;
    left:0px;
    right:0px;
    width:100%;
    height:100%;
    font-size: 28px;
    color: black;
}
-->
</style>
</head>
<body>
<div id="cache">
<img src="image/gif/spinner.gif" alt="chargement" /> Veuillez patienter pendant le chargement de la page...<img src="image/gif/spinner.gif" alt="chargement" />
</div>
<script language="Javascript" type="text/javascript">
function cacheOff()
	{
	cach.visibility = "hidden";
	}

function affichage () {
// permet de déterminer le navigateur en fonction de nos besoins
var dom = net = iex = false;
if (document.getElementById) dom = true; // IE5+ ou Netscape6+/Mozilla
if (document.layers) net = true; // Netscape4
if (document.all) iex = true; // IE4+

if (iex) {
  var larg_utile = "document.body.offsetWidth";
  var haut_utile = "document.body.offsetHeight";
  cach = cache.style ;
}
else if (dom || net) {
  var larg_utile = "window.innerWidth";
  var haut_utile = "window.innerHeight";
  cach = document.getElementById("cache").style ;
}
else {}
var nb_couleurs = screen.colorDepth;
var larg_ecran = screen.width;
var haut_ecran = screen.height;

cach.width = larg_utile ;
cach.height = haut_utile ;
cach.visibility = "visible";
document.write("Largeur utile de la fenêtre = " + eval(larg_utile) + " pixels<br>");
document.write("Hauteur utile de la fenêtre = " + eval(haut_utile) + " pixels<br>");
document.write("Résolution = " + nb_couleurs + " bits/pixels<br>");
document.write("Largeur de l'écran = " + larg_ecran + " pixels<br>");
document.write("Hauteur de l'écran = " + haut_ecran + " pixels<br>");


}
affichage();
window.onload = cacheOff();

</script>
</body>
</html>


seul les info resolution, largeur etc sont inscrite.
Pas besoin de tout ce javascript. 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<style type="text/css">
<!--   
*{border:0;margin:0;padding:0}
html,body{width:100%;height:100%;}

#cache {
    position:absolute; 
    z-index:100; 
    filter:alpha(opacity=60);
	  -moz-opacity: 0.6;
	  opacity: 0.6;
    background-color: white;
    text-align:center;
    top:45%;
    width:100%;
    height:50%;
    font-size: 28px;
    color: black;
}
-->
</style>

</head>
<body>
<script type="text/javascript">
<!--   
//création du div visible seulement si javascript est activé
calque=document.createElement('div');calque.id="cache";
calque.appendChild(document.createTextNode("Veuillez patienter pendant le chargement de la page..."))
document.body.appendChild(calque)
window.onload=function(){calque.style.display="none"}
-->
</script>
<p>contenu de la page</p>
</body>
</html>

Modifié par chmel (13 Sep 2006 - 22:02)
Ouai cest bcp plus court comme ca
mais ca me fait toujours le meme soucis, le div ne prend que la resolution de l'ecran, pas la hauteur totale de la page

peut etre a cause des div que j'utilise dans ma page ou je ne sais pas quoi ...
faudrai remettre
height:100% et top:0 au calque et trouver un moyen de centrer verticalement le texte Smiley confus
en ajoutant un div par exemple:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<style type="text/css">
<!--   
*{border:0;margin:0;padding:0}
html,body{width:100%;height:100%;}

#cache {
    position:absolute; 
    z-index:100; 
    filter:alpha(opacity=60);
	  -moz-opacity: 0.6;
	  opacity: 0.6;
    background-color: red;
    width:100%;
    height:100%;
}
#cache div{
    font-size: 28px;
    color: black;
    text-align:center;
		position:absolute;
		top:45%;
    width:100%;
}
-->
</style>

</head>
<body>
<script type="text/javascript">
<!--   
//création du div visible seulement si javascript est activé
calque=document.createElement('div');calque.id="cache";
centre=document.createElement('div');
calque.appendChild(centre)
centre.appendChild(document.createTextNode("Veuillez patienter pendant le chargement de la page..."))
document.body.appendChild(calque)
window.onload=function(){calque.style.display="none"}
-->
</script>
<p>contenu de la page</p>
</body>
</html>

Modifié par chmel (14 Sep 2006 - 08:11)
... à contenir et permettre de centrer le texte verticalement.
Pour que ça marche il faut mettre le background-color sur le conteneur #cache. j'ai corrigé Smiley lolol
Modifié par chmel (14 Sep 2006 - 08:13)
Sujet clos
Aller à