View Full Version : Insanity is Approaching - Please Help!

02-08-2004, 04:01 AM
Ok ladies and gents...

Let the smart people come out of the woodwork!! <PLEASE!>

link is: http://www.trinitylifedsm.org

I'll give you the code here as well and explain the problem

I haven't included the whole code but you can view my page at the above link to get the full idea.

Now - the problem as you will soon find after visiting the link is that if you mouseover the top nav menu a submenu will appear... HOWEVER, if you try to go to the submenu(sometimes you will make it sometimes you won't) it goes away... You can sometimes get to one of the submenu links but try to go to another one... It goes away. PLEASE SOMEONE HELP BEFORE I ADMIT MYSELF TO A MENTAL HOSPITAL! :D :D

This is the code that handles the menu and creates the submenu.
<script type="text/javascript">
var time = 50000;
var numofitems = 7;

//menu constructor
function menu(allitems,thisitem,startstate){
callname= "gl"+thisitem;
this.numberofmenuitems = 7;
this.caller = document.getElementById(callname);
this.thediv = document.getElementById(divname);
this.thediv.style.visibility = startstate;

//menu methods
function ehandler(event,theobj){
for (var i=1; i<= theobj.numberofmenuitems; i++){
var shutdiv = eval( "menuitem"+i+".thediv");

function closesubnav(){
for (var i=1; i<= numofitems; i++){
// -->

This how I'm handling the mouseover on the main menu (by the way this is all CSS positioned)
<div id="globalNav">
<img alt="" src="images/gblnav_left.gif" height="32" width="5" id="gnl"> <img alt="" src= "images/glbnav_right.gif" height="32" width="5" id="gnr">
<div id="globalLink">
<a href="#" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);">Home</a>
<a href="#" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">About TLC</a>
<a href="#" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);">Ministries</a>

[B]This is how I'm handling the onmouseout of the div layers that hold the submenus.[B]
<DIV id="subglobal" onmouseout="closesubnav(event);">
<div id="subglobal1" class="subglobalNav">
<a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a>
<div id="subglobal2" class="subglobalNav">
<a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2
link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2
link</a> | <a href="#">subglobal2 link</a>
<div id="subglobal3" class="subglobalNav">
<a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3
link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3
link</a> | <a href="#">subglobal3 link</a>

02-08-2004, 05:26 AM
didn't have much time to review your code but here is an aexample of one I use all the time and it has never failed me yet. I hope this will help you.

<form name="slect_region" action="aud_something.php" method="post">
<body bgcolor="#336699" onload="goforit()" link="#123456" alink="#123456" vlink="#123456">
<table width="100%" bgcolor="#336699" border="3" cellspacing="2" bordercolor="#eeeeff" rules="groups"
bordercolorlight="#eeeeff" bordercolordark="#eeeeff">

<td colspan="7" align="center" class="hd_class">MARINER HEALTH CARE, INC.</td>

<td colspan="7" align="center" class="hd_class">AUDIT SCORE CARD - MAIN MENU</td>

<td class="td_class">&nbsp</td>

<!--Links used to initiate the sub menus. Pass in the desired submenu index numbers (ie: 0, 1) -->
<td align="center" class="td_class" valign="center">
<a onMouseover="showit(0)"><img src="doc_item.png">&nbsp;&nbsp;New Survey</a>&nbsp;&nbsp;<img src="doc_item.png">&nbsp;&nbsp;</img><a onMouseover="showit(1)">Existing Survey&nbsp;&nbsp;</a><img src="doc_item.png">&nbsp;&nbsp;</img><a onMouseover="showit(2)">Description Maint.</a></td>

<td class="td_class">&nbsp</td>

<tr align="center" class="td_class">
<td><ilayer width=800 height=32 name="dep1" bgColor="#eeeeff" color="#123456"><layer name="dep2" width=800 height=32></layer>
<!-- Edit the dimensions of the below, plus background color-->
<span id="describe" style="color:#123456; background-color:#eeeeff;width:800px;height:32px" onMouseover="clear_delayhide()" onMouseout="resetit(event)"></span>
<script language="JavaScript1.2">

Tabs Menu (mouseover)- By Dynamic Drive
For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
This credit MUST stay intact for use

var submenu=new Array()

//Set submenu contents. Expand as needed. For each content, make sure everything exists on ONE LINE. Otherwise, there will be JS errors.

submenu[0]='<font size="4" face="Arial" color="#123456"><b><a href="aud_new_survey.php">Select Facility</a>'

submenu[1]='<font size="4" face="Arial" color="#123456"><b><a href="aud_exist_survey.php">Select Facility</a>'

submenu[2]='<font size="4" face="Arial" color="#123456"><b><a href="aud_desc_maint.php?action=add">Add New Description</a> | <a href="aud_desc_maint.php?action=change&pass=1">Change a Description</a> | <a href="aud_desc_maint.php?action=delete&pass=1">Delete a Description</a>'

submenu[3]='<font size="4" face="Arial" color="#123456"><b><a href="aud_pnt_maint.php?action=add">Add New Points</a> | <a href="aud_pnt_maint.php?action=change">Change a Point</a> | <a href="aud_pnt_maint.php?action=delete">Delete a Point</a>'

//Set delay before submenu disappears after mouse moves out of it (in milliseconds)
var delay_hide=500

/////No need to edit beyond here

var menuobj=document.getElementById? document.getElementById("describe") : document.all? document.all.describe : document.layers? document.dep1.document.dep2 : ""

function showit(which){
thecontent=(which==-1)? "" : submenu[which]
if (document.getElementById||document.all)
else if (document.layers){

function resetit(e){
if (document.all&&!menuobj.contains(e.toElement))
else if (document.getElementById&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))

function clear_delayhide(){
if (window.delayhide)

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;