Page 1 of 1

hover menu problem

Posted: Thu Oct 09, 2003 2:57 am
by mesz
> In advance, thank you for any help that can be offered to me <
Having trouble with hover layers to display menus.
One menu does not appear until linked to, but one menu's CSS class is permanently displayed - but only shows data when the link is selected.
Why oh why, can these just not stay hidden as intended.

Script for layers:

Code: Select all

<script language="JavaScript">
<!--
var NN4 = document.layers? true : false;
var IE4 = document.all? true : false;
var left;
var top;

function display(layerName) &#123;
  if (IE4) &#123;
    document.all&#1111;layerName].style.pixelLeft = left + 25;
    document.all&#1111;layerName].style.pixelTop = top;
    document.all&#1111;layerName].style.visibility = "visible";
  &#125;
  else if(NN4) &#123;
    document.layers&#1111;layerName].left = left + 25;
    document.layers&#1111;layerName].top = top;
    document.layers&#1111;layerName].visibility = "show";
  &#125;
&#125;

function hide() &#123;
  if (IE4) &#123;
    document.all&#1111;'layer1'].style.visibility = "hidden";
    document.all&#1111;'layer2'].style.visibility = "hidden";
  &#125;
  else if(NN4) &#123;
    document.layers&#1111;'layer1'].visibility = "hidden";
    document.layers&#1111;'layer2'].visibility = "hidden";
  &#125;
&#125;

function setMouseCoordinate(e) &#123;
  if (NN4) &#123;
    left = e.pageX; 
    top = e.pageY;
  &#125;
  else if (IE4) &#123;
    left = document.body.scrollLeft + event.clientX
    top = document.body.scrollTop + event.clientY
  &#125;
&#125;

if (NN4) 
  document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = setMouseCoordinate;

// -->
</script>
layers in BODY of script:

Code: Select all

<div class="whiteMENU2">
<font class="arialsmB">

<div id="layer1"  style="VISIBILITY:hidden;">
<script language="JavaScript">
<!--
  if (NN4 || IE4) &#123;
    document.write("<table border="0" bgcolor="white" cellspacing="0" CELLPADDING="0">");
    document.write("<tr><td>");
    document.write("<table>");
    document.write("<tr><td><a href="JS/intro.html">Introduction To toads</a></td></tr>");
    document.write("<tr><td><a href="JS/array.html">Arrays of toads</a></td></tr>");
    document.write("<tr><td><a href="JS/JSSpec.html">Specifications of toads</a></td></tr>");
    document.write("<tr><td><a href="JS/advJS.html">Advanced toads</a></td></tr>");
    document.write("</table>");
    document.write("</td></tr>");
    document.write("</table>");
  &#125;
// -->
</script>
</div>

</div>
</font>


<div class="whiteMENU">
<font class="arialsmB">


<div id="layer2" style="VISIBILITY:hidden;">
<script language="JavaScript">
<!--
  if (NN4 || IE4) &#123;

    document.write("<a href="JS/intro.html">pageONE</a>");
    document.write("<a href="JS/array.html">pageTWO</a>");
    document.write("<a href="JS/JSSpec.html">pageTHREE</a>");
    document.write("<a href="JS/advJS.html">pageFOUR</a>");

  &#125;
// -->
</script>
</div>

relevant CSS classes:

Code: Select all

.whiteMENU
&#123; 
position:absolute;
padding:0px; 
overflow:visible;
top:2%;
right:12.5%;
border:0px solid #FFFFFF; 
z-index:6;
background: #A9B748;
&#125;

.whiteMENU2
&#123; 
position:absolute;
padding:0px; 
overflow:visible;
top:8.5%;
right:1.5%;
border:0px solid #FFFFFF; 
z-index:5;
background: #FFFFFF;
	font-family : Arial, Helvetica, sans-serif;
	font-size : 10px;
	FILTER: alpha(opacity=90)

&#125;

Posted: Thu Oct 09, 2003 7:36 am
by mesz
I have sorted it - just make the background of the div class holding the dropdown transparent, and make sure that the items in the dropdown are contained in another class, or table with a coloured backgorund.