Link to home
Start Free TrialLog in
Avatar of dgelinas
dgelinasFlag for United States of America

asked on

Menu Item on Dynamic Menu will not highlight on mouseover

I took out alot of the extra code but some still exists.. This is problem a simple problem but I can't get it to work.  It used to highlight on mouseover until I had to change this line

   document.write('<a style="width: 190px" class="menuItem"  href="javascript:menuAction(\''+theMenu.actions[i]+ '\',\''+theMenu.typeOfOpen[i]+'\')">' + theMenu.items[i] + '</a>');

TO this line

document.write('<a style="width: 190px" class="menuItem"  OnMouseOver="menuItemMouseOver(\'' + theMenu.items[i] + '\')"  onClick="menuAction(\''+theMenu.actions[i]+ '\',\''+theMenu.typeOfOpen[i]+'\')">' + theMenu.items[i] + '</a>');

With the above line the row whould highlight from this line of css code which doesn't work anymore
  a.menuItem:hover { background-color: #FFCE85; color:black;cursor: default; z-index:1000;}


Thanks!!!!!!!!!!!!!!

var timeOut = null, numMenus = 0;
var menus = new Object();
var ns4 = false; // true if the browser supports layers
var ie4 = false; // true if the browser supports document.all
var otherDOM = false; // true if ns6
var ie5plus = false; // true if browser is IE 5+
var adjustSpacing = false; // true if we need to adjust menu spacing
var activeMenuHeading = -1; // holds number of the active menu (heading)

function detectBrowser()
{
    if (document.layers)
       ns4 = true;

    else if (document.all)
    {  
      ie4 = true;
 
      if (navigator.userAgent.indexOf("MSIE 4") != -1)
         ie5plus = false;
      else
         ie5plus = true;

      if (((navigator.userAgent.indexOf("MSIE 5.5") == -1) &&
           (navigator.userAgent.indexOf("MSIE 6") == -1)) ||
           (navigator.userAgent.indexOf("Mac") != -1))
              adjustSpacing = true;
    }
    else if (document.getElementById)
    {
       otherDOM = true;
       adjustSpacing = true;
    }
}


function showMenu(which,x,y)  
{
 // accepts an integer indicating which menu to show and x/y    
     document.getElementById("menu" + which).style.left = x;
     document.getElementById("menu" + which).style.top = y;
     document.getElementById("menu" + which).style.visibility = "visible";
 }


function hideMenu(which)
{
// accepts an integer indicating which menu to hide
  document.getElementById("menu" + which).style.visibility = "hidden";
   
}



// Note: Valid values for openNewWindow are "newWindow" or "overlay".
//       overlay   - over writes the information in the current window.
//       newWindow - opens a new window
//
function addItem(menuName, item, action, openNewWindow)
{  

  if (!menus[menuName])
  {
      var newMenu = new Object();
      newMenu.name = menuName;
      newMenu.num = numMenus++;
      newMenu.items = new Array();
      newMenu.actions = new Array();
      newMenu.typeOfOpen = new Array();  //true = open new window, false=overlay/replace current window
      menus[menuName] = newMenu;
     
  }

  // IE4 doesn't support push() so add manually
  menus[menuName].items[menus[menuName].items.length] = item;
  menus[menuName].actions[menus[menuName].actions.length] = action;
  menus[menuName].typeOfOpen[menus[menuName].typeOfOpen.length] = openNewWindow;

}

function createMenuHeadings()  {

   else if (ie4 || otherDOM)
   {
     document.write('<div class="menuBar">');
     debugWrite('<div class="menuBar">');
   }

   for (var menu in menus)
   {
     var theMenu = menus[menu];

    (ie4 || otherDOM)
     {
       document.write('<a onclick="menuHeadingMouseClick(event, ' + theMenu.num + '); return false" onmouseout="menuHeadingMouseOut(' + theMenu.num + ')" onmouseover=" menuHeadingMouseClick(event, ' + theMenu.num + ')" class="menuHeading" id="menuHeading' + theMenu.num + '">' + theMenu.name + '</a>');
       debugWrite('<a onclick="menuHeadingMouseClick(event, ' + theMenu.num + '); return false" onmouseout="menuHeadingMouseOut(' + theMenu.num + ')" onmouseover="menuHeadingMouseOver(' + theMenu.num + ')" class="menuHeading" id="menuHeading' + theMenu.num + '">' + theMenu.name + '</a>');
     }
   
     if (adjustSpacing)
     {
       document.write('&nbsp; &nbsp; &nbsp;');
       debugWrite('&nbsp; &nbsp; &nbsp;');
     }
    }

    if (ie4 || otherDOM)
    {
      document.write('</div>');
      debugWrite('</div>');
    }
}

function createMenus()
{

   createMenuHeadings();

   for (var menu in menus)
   {
     var theMenu = menus[menu];
     if (ie4 || otherDOM)
     {
        document.write('<div class="menu" id="menu' + theMenu.num + '" onmouseover="clearTimeout(timeOut)"   onmouseout="timeOut = setTimeout(\'menuHeadingDeactivate(); hideMenu(' + theMenu.num + ')\',100)">');
     }
   
     for (var i=0; i<theMenu.items.length; i++)
     {
     if (ie4 || otherDOM)
      {
     
        //document.write('<a style="width: 190px" class="menuItem" href="' + theMenu.actions[i] + '">' + theMenu.items[i] + '</a>');
      //document.write('<a style="width: 190px" class="menuItem"  onClick="menuAction(\''+theMenu.actions[i] + '\')">' + theMenu.items[i] + '</a>');
      document.write('<a style="width: 190px" class="menuItem"  OnMouseOver="menuItemMouseOver(\'' + theMenu.items[i] + '\')"  onClick="menuAction(\''+theMenu.actions[i]+ '\',\''+theMenu.typeOfOpen[i]+'\')">' + theMenu.items[i] + '</a>');
     
        }
      if (ie4 && !ie5plus)
      {
         document.write('<br>');
      }
     }  
 
}
function menuItemMouseOver(menuItem)   //Need to do something here to hightlike the row
{
       document.all("menuItem" + menuItem).style.borderColor="#BBCCCC black black #BBCCCC";
}

function menuHeadingMouseOver(menuHeading)
{
 
    if (ie4)
       document.all("menuHeading" + menuHeading).style.borderColor="#BBCCCC black black #BBCCCC";
    else if (otherDOM)
       document.getElementById("menuHeading" + menuHeading).style.borderColor="#BBCCCC black black #BBCCCC";
}

function menuHeadingMouseOut(menuHeading)
{

  if (ie4 || otherDOM)
  {
     if (activeMenuHeading != -1 && activeMenuHeading == menuHeading)
        timeOut = setTimeout('hideMenu(' + activeMenuHeading + '); menuHeadingDeactivate();',100);
     else
     {
         if (ie4)
           document.all("menuHeading" + menuHeading).style.borderColor="#BBCCCC";
         else
           document.getElementById("menuHeading" + menuHeading).style.borderColor="#BBCCCC";
     }
  }
}

function menuHeadingActivate(menuHeading)
{
     document.getElementById("menuHeading" + menuHeading).style.background = "#EEEEEE";
     document.getElementById("menuHeading" + menuHeading).style.color = "#6688BB";
     document.getElementById("menuHeading" + menuHeading).style.borderColor = "#BBCCCC black #EEEEEE #EEEEEE";

  activeMenuHeading = menuHeading;
}
 
  function menuHeadingDeactivate()
  {
     if (activeMenuHeading != -1)
     {
 
         document.getElementById("menuHeading" + activeMenuHeading).style.borderColor= "#BBCCCC";
         document.getElementById("menuHeading" + activeMenuHeading).style.background = "transparent";
         document.getElementById("menuHeading" + activeMenuHeading).style.color = "#6688BB";
     
       activeMenuHeading = -1;
     }
}

function menuHeadingMouseClick(event, which)  {       
 if (activeMenuHeading != -1)
  {
    clearTimeout(timeOut);
    hideMenu(activeMenuHeading);
    menuHeadingDeactivate();
  }
 
  if (ie4 || otherDOM)
   menuHeadingActivate(which);

  if (event.srcElement)
  {
     x = event.srcElement.offsetLeft;
     y = event.srcElement.offsetTop + event.srcElement.offsetHeight;
  }
  else if (otherDOM)
  {
     // NS6 specific
     x = document.getElementById("menuHeading" + which).offsetLeft;
     y = document.getElementById("menuHeading" + which).offsetTop + document.getElementById("menuHeading" + which).offsetHeight;
  }

  if (adjustSpacing)
  {
     x += 5; y += 7;
  }

  showMenu(which, x, y);
}

function menuAction(myAction, openType)
{
      
      if(openType.toLowerCase() == "overlay") //use the same window
      {
    location.replace(myAction);
  } else if ( openType.toLowerCase() == "newwindow" ) {
    window.open(myAction,"","scrollbars=no");
  } else if ( openType.toLowerCase() == "dooption" ) {
      parent.window.focus();         
        doOption( myAction );      
  } else if ( openType.toLowerCase() == "nafeature") {
        parent.window.focus();
        naFeature();
  } else {
    alert ( "menu action undefined" );
  }
}      
ASKER CERTIFIED SOLUTION
Avatar of incongruent
incongruent

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial