Responding to "mouseover" on a menubar item

CosmickGold · Post by **CosmickGold** » Fri May 27, 2016 1:20 am

I wanted hovering over menu items to show in a text box what that menu will do, without having to click anything. And although the MenuBar's properties window does a great job of handling menu-item "click" events, it does not provide any way to handle "hover" events.

It took a couple of days, but I found another way to find and handle "hover" events for each individual menu item. Here's how I did it:

First of all, the needed information is in "wb_MenuBar1.innerHTML". This is a long string that describes the HTML table for the entire open menu, including all sub-menus. Out of it, three pieces of information are needed for each menu and submenu, found by doing text searches on the string. They are "<tbody>", "Text>", and "mHover".

The below code first locates "mHover", for this is in the menu-item the mouse is over. Then moving Back up the string from there, the closest occurrence of "<tbody>" is located, which marks the top of the current menu or sub-menu. Lastly, the number of occurrences of "Text>" between these occurrences of "<tbody>" and "mHover" are counted, for it is the number of menu items directly above the item being hovered over, revealing how far down the list of items your mouse is hovering.

This process is performed for the menu, and then the selected sub-menu, then it's sub-sub-menu, etc., each adding a digit to the result. For example, if you had moved the mouse over the 2nd item of the main menu, then out to the 3rd item in it's submenu, the over to the 5th item of the sub-sub menu, the resulting string would be "235", pinpointing that specific menu item. (If you have any menu with 10 or more items, you'll need to make that "020305" to have places for the 10's columns. My menus are short, so not required by me.) And of course, the menus must be set to open by hover, requiring no clicks.

The use of the function, "setTimeout()", is absolutely necessary because the "hover" event calls your function BEFORE the changes to the menu (and resulting string) have been made. This means your "innerHTML" string will not contain the updated information you need, until AFTER the "hover" event has completed. Using "setTimeout() to wait 1/2 second does the trick, letting the "hover" event complete, and making the program look more intelligent as well since it "knows" to wait for you to stop the mouse at the item you intend.

You can use this code to get the name of the menu item hovered over as well, or just its location as I have done. Here is the way I have successfully used it.

(1) Open "Page > Page HTML" and click the tab labeled "Between <head></head> tags" and paste the following code:

Code: Select all

var timer1 = 0;
function hoverItem()
{
   var pStr = "";
   var str1 = document.getElementById("wb_MenuBar1").innerHTML;
   while (true)
   {
      var pos2 = str1.indexOf("mHover");
      if (pos2 == -1)
         break;
      var str2 = str1.slice(0,pos2);
      var pos1 = str2.lastIndexOf("<tbody>");
      str2 = str2.slice(pos1);
      var arr1 = str2.match(/Text"\>/g);
      if (arr1)
      {
         var len1 = arr1.length;
         pStr += String(len1 + 1);
      }
      else
      pStr += "1";
      str1 = str1.slice(pos2+7);
   }
   $("#wb_Text1").html($("#p"+pStr).html());
}

function pageLoad()
{
  $("#wb_MenuBar1").mouseover(function(){
      clearTimeout(timer1);
      timer1 = setTimeout(hoverItem, 500);
  });
}

(2) Click the "Inside <body> tag" tab, and paste in the following line:

Code: Select all

onload="pageLoad()"

(3) Click the "Before </body>" tab, and paste in the following HTML code, modifying the id's to fit what your menu-item "numbers" are, and entering what you want each item to say:

Code: Select all

<div style="display:none;">
   <p id=p1>Say something here.</p>
   <p id=p11>Another comment here</p>
   <p id=p12>And so on.</p>
   <p id=p13>Life is what happens.</p>
   <p id=p131>While you're making other plans.</p>
   <p id=p132>The last example</p>
<div>

In all likelihood, there will be things you need to modify to fit the above into your project. I use function-key 12 on my Google Chrome browser to open Google's built-in "Developer Tools" which steps me through every line of code as it executes, showing me the data values and any errors. Then it's easy to see my problems and make corrections in Web Builder. (Works great!)

Oh, and one more thing: Be sure to set "Click to open submenus" to "false", in the MenuBar's properties, so you don't have to click anything for this to work.

Good luck!