Solved

Menu Item on Dynamic Menu will not highlight on mouseover

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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Whether you’re a college noob or a soon-to-be pro, these tips are sure to help you in your journey to becoming a programming ninja and stand out from the crowd.
In this post we will learn how to connect and configure Android Device (Smartphone etc.) with Android Studio. After that we will run a simple Hello World Program.
Viewers will learn how to properly install Eclipse with the necessary JDK, and will take a look at an introductory Java program. Download Eclipse installation zip file: Extract files from zip file: Download and install JDK 8: Open Eclipse and …
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…

744 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now