RESEARCH OF THE DAY

SE BLOG: StarDate 05/11/06
TODAY'S TOPIC - JAVASCRIPT TIMEOUT
 
Links to My Projects
and other Current FX
 
onMouseover CSS DROPDOWN MENU which needs a timeout function

<script type="text/javascript">
<!--
var W3CDOM = document.getElementById;
var counter = 0;
var globalNav = new Array;

function getObj(idvalue) {
  return document.getElementById(idvalue);
}

function show() {
  var num = this.number;
  if (navMenus[num].style.display == 'block') navMenus[num].style.display = 'none';
  else navMenus[num].style.display = 'block';
}

function timerhide() {
  var num = this.number;
  if (navMenus[num].style.display == 'none') navMenus[num].style.display = 'block';
  else navMenus[num].style.display = 'none';
}

window.onload = function() {
  if (!W3CDOM) return;

  var navArea = getObj('nav');
  navMenus = navArea.getElementsByTagName('div');
  var allLinks = navArea.getElementsByTagName('a');
 
  for (i=0; i<allLinks.length; i++) {
      if (allLinks[i].className == 'global') {
          globalNav[counter] = allLinks[i];
          globalNav[counter].onmouseover = show;
          globalNav[counter].onmouseout = timerhide;
          globalNav[counter].number = counter;
          counter++;
      }
  }
 
  for (i=0; i<navMenus.length; i++) {
      navMenus[i].style.display = 'none';
     
  }
}
-->
</script>

 

<style type="text/css">

div .submenu a{display:block; text-decoration: none; font: 11px verdana,geneva,lucida,arial,sans-serif; color:green;}

div .submenu a:hover {color:}

.submenu a.global {color: #000; margin-top: 10px; font-size: 12px; padding-left: 17px; width: 104px;}

.submenu a {width: 104px; text-align:center;}

a.global, div .submenu a {voice-family: "\"}\""; voice-family:inherit; float:left;}

</style>

 

NASTY LINE BREAKS :(!

<div id=nav>
<!-- / 1 / -->
<span class="item" style="width:120px; float:left;">
<a href="/products.htm" class="global">
<img
border="0"
src="http://www.ballydufffarm.com/images/menuButtons-pd.gif"
onMouseOver="this.src='http://www.ballydufffarm.com/images/menuButtons-pd_mo.gif'"
onMouseOut="this.src='http://www.ballydufffarm.com/images/menuButtons-pd.gif'"> 
</a>
<div class="submenu">
  <a href="product1.html">Product 1</a>
  <a href="product2.html">Product 2</a>
  <a href="product3.html">Product 3</a>
  <a href="product4.html">Product 4</a>
</div>
</span>
<!-- / 1 / -->

<!-- / 2 / -->
<span class="item" style="width:120px; float:left">
<a href="/lincolns.htm" class="global">
<img
border="0"
src="http://www.ballydufffarm.com/images/menuButtons-bl.gif" onMouseOver="this.src='http://www.ballydufffarm.com/images/menuButtons-bl_mo.gif'" onMouseOut="this.src='http://www.ballydufffarm.com/images/menuButtons-bl.gif'"> 
</a>
<div class="submenu">
  <a href="product1.html">Product 1</a>
  <a href="product2.html">Product 2</a>
  <a href="product3.html">Product 3</a>
  <a href="product4.html">Product 4</a>
</div>
</span>
<!-- / 2 / -->

<!-- / 3 / -->
<span class="item" style="width:120px; float:left">
<a href="/lincolns.htm" class="global">
<img
border="0"
src="http://www.ballydufffarm.com/images/menuButtons-hc.gif" onMouseOver="this.src='http://www.ballydufffarm.com/images/menuButtons-hc_mo.gif'" onMouseOut="this.src='http://www.ballydufffarm.com/images/menuButtons-hc.gif'">
</a>
<div class="submenu">
  <a href="product1.html">Product 1</a>
  <a href="product2.html">Product 2</a>
  <a href="product3.html">Product 3</a>
  <a href="product4.html">Product 4</a>
</div>
</span>
<!-- / 3 / -->
</div id=nav>