CSS menu overlay ne fonctionne pas dans Firefox

J'ai ce codeCSS menu overlay ne fonctionne pas dans Firefox

style.css

.row { 
    position: fixed; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    height: 22px; 
    width: 100%; 
    background: black; 
    color: white; 
    padding: 0px; 
} 

.content { 
    margin-top: 22px; 
    padding: 10px; 
} 

div.navigation span.left { 
    float: left; 
    text-align: left; 
    font-weight: bold; 
    width: 49%; 
    } 

div.navigation span.right { 
    float: right; 
    text-align: right; 
    font-weight: bold; 
    width: 49%; 
    } 

.menu { 
    position: fixed; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    height: 100%; 
    width: 100%; 
    background: black; 
    color: white; 
    padding: 10px; 
opacity:0.9; 
display: ; 
}

navigation.htm

<html> 
<head> 
<meta content="text/html; charset=ISO-8859-1" 
http-equiv="content-type"> 
<title>Home</title> 
<link rel="StyleSheet" href="style.css" type="text/css"> 
<script type="text/javascript"> 
function dispHandle(obj) 
{ 
if (obj.style.display == "none") 
obj.style.display = ""; 
else 
obj.style.display = "none"; 
} 

</script> 
</head> 
<body onload="dispHandle(uni);"> 
<div class="navigation"> 
<div id="container" style="width: 100%;"> 
<div class="row"> <span class="left"><a onmouseover="dispHandle(uni)">Activities</a><img 
style="width: 18px; height: 18px;" alt="" src="images/void.png"></span> 
<span style="font-weight: bold;" class="right"><img 
style="width: 18px; height: 18px;" alt="" src="images/volume.png"><img 
style="width: 18px; height: 18px;" alt="" src="images/bluetooth.png"><img 
style="width: 18px; height: 18px;" alt="" src="images/wireless.png"><img 
style="width: 26px; height: 18px; font-style: italic;" alt="" 
src="images/battery.png"><iframe 
src="http://free.timeanddate.com/clock/i2vrnsgh/fcfff/tct/pct/ftb" 
allowtransparency="true" frameborder="0" height="18" width="86"></iframe><img 
style="width: 18px; height: 18px;" alt="" src="images/user.png">Demi 
Lovato&nbsp;</span> 
</div> 
</div> 
</div> 
<div id="uni"> 
<div style="text-align: center;" class="menu"> <br> 
<img onclick="dispHandle(uni)" 
style="border: 0px solid ; width: 48px; height: 48px;" alt="" 
    src="http://demilovato.sourceforge.net/images/close.png"><br> 
<br> 
<div align="center"> 
<table style="text-align: left; width: 410px; height: 268px;" border="1" 
cellpadding="2" cellspacing="2"> 
<tbody> 
<tr> 
<td style="vertical-align: top; text-align: center;"><a 
href="index.htm"><img 
style="border: 0px solid ; width: 48px; height: 48px;" alt="" 
src="images/Home.png"></a><br> 
Home<br> 
</td> 
<td style="vertical-align: top; text-align: center;"><a 
href="Downloads.htm"><img 
style="border: 0px solid ; width: 48px; height: 48px;" alt="" 
src="images/Downloads.png"></a><br> 
Downloads<br> 
</td> 
<td style="vertical-align: top; text-align: center;"><a 
href="Screenshots.htm"><img 
style="border: 0px solid ; width: 48px; height: 48px;" alt="" 
src="images/Screenshots.png"></a><br> 
Screenshots<br> 
</td> 
<td style="vertical-align: top; text-align: center;"><a 
href="Links.htm"><img 
style="border: 0px solid ; width: 48px; height: 48px;" alt="" 
src="images/Links.png"></a><br> 
Links<br> 
</td> 
</tr> 
<tr> 
<td style="vertical-align: top; text-align: center;"><a 
href="FAQ.htm"><img 
style="border: 0px solid ; width: 48px; height: 48px;" alt="" 
src="images/FAQ.png"></a><br> 
FAQ<br> 
</td> 
<td style="vertical-align: top; text-align: center;"><a 
href="Contact.htm"><img 
style="border: 0px solid ; width: 48px; height: 48px;" alt="" 
src="images/Contact.png"></a><br> 
Contact<br> 
</td> 
<td style="vertical-align: top; text-align: center;"><a 
href="About.htm"><img 
style="border: 0px solid ; width: 48px; height: 48px;" alt="" 
src="images/About.png"></a><br> 
About<br> 
</td> 
<td style="vertical-align: top;"><br> 
</td> 
</tr> 
</tbody> 
</table> 
<br> 
</div> 
</div> 
</div> 
</body> 
</html>

Son supposé être en mesure de la souris sur les activités et il montre un plein écran css menu puis fermez en cliquant sur le XI faire cela par un spectacle cacher la fonction javascipt. Deux problèmes sont quand je le charge dans firefox il ne fonctionne pas encore il fonctionne dans tous les autres navigateurs je l'ai essayé (Safari, Chrome, Rekonq) Aussi comment puis-je le cacher par défaut au lieu de onload?

Source

2011-12-12 zeitue

solution Exemple ici: http://jsfiddle.net/msZVY/3/

Comme dit dans la console Firefox, Firefox ne sait pas ce que "uni" est. La fonction dispHandle(uni) indique "Exécuter la fonction dsipHandle avec le paramètre ayant l'objet uni". uni n'est pas défini. Je ne sais pas pourquoi Safari/Chrome est capable d'être "plus intelligent" et de voir que uni est l'identifiant d'un élément. (Peut-être quelqu'un d'autre peut me éclairer) Mais pour Firefox, vous devez indiquer explicitement l'utilisation:

function dispHandle(id) 
{ 
    obj = document.getElementById(id); //define obj using the id 
    if (obj.style.display == "none") 
    obj.style.display = "block"; 
    else 
    obj.style.display = "none"; 
}

Dans votre ligne javascript vous devez mettre uni entre guillemets. onmouseover="dispHandle('uni')" au lieu de onmouseover="dispHandle(uni)"

Pour répondre à votre autre question sur une autre façon de le cacher en plus onload, vous pouvez le faire avec css régulière:

#uni{display:none}

Dans votre fonction ci-dessus j'ai aussi changé obj.style.display = "";-obj.style.display = "block"; comme cela va explicitement le changer dans la feuille de style à l'affichage du bloc par défaut de div, en écrasant votre style.css

Source

2011-12-12 06:25:55 Vigrond

Merci a fonctionné parfaitement. aussi voici le site http://demilovato.sf.net – zeitue

Nice, j'aime votre idée de design. Heureux d'avoir pu aider. – Vigrond

Merci je me suis basé sur l'environnement de bureau GNOME http://gnome.org et je suis heureux que vous pourriez aider parce que je viens de commencer la programmation web il y a 5 jours et je ne sais pas vraiment ce que je fais. – zeitue

CSS menu overlay ne fonctionne pas dans Firefox

Répondre

Questions connexes