Solved

Menu Item on Dynamic Menu will not highlight on mouseover

Posted on 2003-11-07
1
389 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

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

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

Entering a date in Microsoft Access can be tricky. A typo can cause month and day to be shuffled, entering the day only causes an error, as does entering, say, day 31 in June. This article shows how an inputmask supported by code can help the user a…
A short article about problems I had with the new location API and permissions in Marshmallow
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 …
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

617 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