Solved

Menu Item on Dynamic Menu will not highlight on mouseover

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
stringclean challenge 26 71
wordlen challenge 3 61
advertisement module in core php 4 147
Q2. How to run DAX query from SSMS. I don’t see any DAX query type. 1 48
This article will show, step by step, how to integrate R code into a R Sweave document
Computer science students often experience many of the same frustrations when going through their engineering courses. This article presents seven tips I found useful when completing a bachelors and masters degree in computing which I believe may he…
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 fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

867 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

18 Experts available now in Live!

Get 1:1 Help Now