CODEWITHSUNDEEP
javascripthtmlcssfirefoxoverlays
zeitue
zeitue

Reputation: 1683

CSS overlay menu not working in firefox

I have this code

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>

Its suppose to be able to mouse over Activities and it shows a full screen css menu and then close by clicking the X I do this by a show hide javascipt function. Two problems are when I load it in firefox it does not work yet it works in all other browsers I tried it in (Safari, Chrome, Rekonq) Also how can I hide it by default instead of onload?

Upvotes: 0

Views: 1116

Answers (1)

Vigrond
Vigrond

Reputation: 8198

Example solution here: http://jsfiddle.net/msZVY/3/

As told in the Firefox console, Firefox doesn't know what "uni" is. The function dispHandle(uni) says "Execute dsipHandle function with the parameter having object uni". uni is not defined.

I'm not sure why Safari/Chrome is able to be "smarter" and see that uni is the id of an element. (perhaps someone else can enlighten me) But for Firefox you should explicitly state this using:

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";
}

In your inline javascript you should put uni in quotes. onmouseover="dispHandle('uni')" instead of onmouseover="dispHandle(uni)"

To answer your other question about an alternative way to hide it besides onload, you can do it with regular css:

#uni{display:none}

In your above function I also changed it from obj.style.display = ""; to obj.style.display = "block"; as this will explicitly change it in the stylesheet to div's default block display, overwriting your style.css

Upvotes: 1

Related Questions