Initial function call slow

initial call to function takes 2 - 3 mouse clicks to run

[humpg]

Let me lay it out for ya. My site consists of 3 layers a header, main body, and footer.

In the main body I have a layer containing a menu with four images as buttons. When you click on the image a call is made to toggle the layer on and off ( which would be the submenu ).

There are 2 problems here.

1:In all browsers it takes 2-3 clicks to get that submenu to show. But, after the initial opening it will only take 1 click to open and close that submenu.

2: In Firefox the first 3 are not even recognized as link, but the fourth one is.

Here is the HTML for all four menu buttons:

1:<a href="#" onclick="toggleSub('sub_product_mth'); return false" onmouseover="MM_showHideLayers('flyout_math1','','hide','hideflyout_sub','','hide')">
<img src="images/ed_layout/prod_menu_btns/str_menu_math.gif" alt="Math Series" border="0" />
</a> 
2:<a href="#" onclick="toggleSub('sub_product_hlth'); return false" onmouseover="MM_showHideLayers('flyout_math1','','hide','flyout_math2','','hide','hideflyout_sub','','hide')">
<img src="images/ed_layout/prod_menu_btns/str_menu_hlth.gif" alt="Health Series" border="0" />
</a> 
3:<a href="#" onclick="toggleSub('sub_product_lang'); return false" onmouseover="MM_showHideLayers('flyout_hlth2','','hide','flyout_hlth3','','hide','hideflyout_sub','','hide')">
<img src="images/ed_layout/prod_menu_btns/str_menu_lang.gif" alt="Language Series" border="0" />
</a>
4:<a href="#" onclick="toggleSub('sub_product_test'); return false" onmouseover="MM_showHideLayers('flyout_hlth2','','hide','flyout_hlth3','','hide','flyout_lang2','','hide','hideflyout_sub','','hide')">
<img src="images/ed_layout/prod_menu_btns/str_menu_test.gif" alt="Testing Series" width="173" height="41" border="0" />
</a> 

And here is the Javascript:

function toggleSub(submenu) {
  if (document.getElementById(submenu).style.display == 'none') {
    document.getElementById(submenu).style.display = 'block'
  } else {
    document.getElementById(submenu).style.display = 'none'
  }
}

Any help would be great

[birdbrain]

Hi there humpg,

the way that you have your script set out, it will take 2 clicks to make it work. ;)

You need to turn it round like this...

function toggleSub(submenu) {
if (document.getElementById(submenu).style.display == 'block') {
document.getElementById(submenu).style.display = 'none'
} else {
document.getElementById(submenu).style.display = 'block'
}
}

birdbrain

[birdbrain]

sorry double posted ;)

birdbrain

[humpg]

Whooo Hooo,

Not sure how I didn't see that one, but I really do appreciate your help. Now I can move on.

Thanks again.