Solved

Menu Item on Dynamic Menu will not highlight on mouseover

Posted on 2003-11-07
1
387 Views
Last Modified: 2008-02-26
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" );
  }
}      
0
Comment
Question by:dgelinas
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
1 Comment
 
LVL 2

Accepted Solution

by:
incongruent earned 500 total points
ID: 9704267
your new line is an anchor tag, same as before.   but the new tag does not have an 'href' attribute.  Without that it probably wont do anything.   Try adding  href='#'  to the line.


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



You may have to add a  return false; to the mouseover tag as well.

This should fix it.

-Allan
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Since upgrading to Office 2013 or higher installing the Smart Indenter addin will fail. This article will explain how to install it so it will work regardless of the Office version installed.
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
An introduction to basic programming syntax in Java by creating a simple program. Viewers can follow the tutorial as they create their first class in Java. Definitions and explanations about each element are given to help prepare viewers for future …

710 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question