Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Jupi on Oct 15, 2008 07:20
open dhtmlx forum
Hiding Menu

Hi

Thanks to my previous query related to hiding the menu in firefox issue.

In the same sample html page, if you notice aMenuBar.topNod checks only for the topNod. If the mouse is over the submenus for instance, the top menu gets hidden. This should not be the case, the mouseout/mouseleave event should be for the entire aMenuBar including submenus, and not the topNod alone.

Let me know how to fix this issue.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Building Menu with script</title>
    <link rel="STYLESHEET" type="text/css" href="dhtmlxmenu.css">
    <link rel="STYLESHEET" type="text/css" href="dhtmlxmenu_alter.css">
    
    <script language="JavaScript" src="dhtmlxprotobar.js"></script>
    <script language="JavaScript" src="dhtmlxmenubar.js"></script>
    <script language="JavaScript" src="dhtmlxcommon.js"></script>

        <script>

         var flag;
        function onButtonClick(itemId,itemValue)
        {
            //do nothing    
        }
        
        function showmenu() {



     if(!flag){

            hideFlag=false;
            aMenuBar=new dhtmlXMenuBarObject(document.getElementById('altermenu'),"10","10","");
            aMenuBar.setOnClickHandler(onButtonClick);
            aMenuBar.setMenuMode("popup");
            aMenuBar.enableWindowOpenMode(false);
            aMenuBar.disableSmartPositioning(true);

            //create menu item
            var item = new dhtmlXMenuItemObject("MainSpan","Span Actions","");
            aMenuBar.addItem(aMenuBar,item);
            //create submenu
            var subMenu = new dhtmlXMenuBarPanelObject(aMenuBar,item,false,10,true);        

         var item = new dhtmlXMenuItemObject("span1","Span Actions 1");        
            aMenuBar.addItem(subMenu,item);                        
            var item = new dhtmlXMenuItemObject("span2","Span Actions 2","");
            aMenuBar.addItem(subMenu,item);                

            //create menu item
            var item = new dhtmlXMenuItemObject("MainNote","Notifications","");
            aMenuBar.addItem(aMenuBar,item);
            //create submenu
            var subMenu = new dhtmlXMenuBarPanelObject(aMenuBar,item,false,10,true);                
            
            var item = new dhtmlXMenuItemObject("note1","Notifications 1","");        
            aMenuBar.addItem(subMenu,item);                        
            var item = new dhtmlXMenuItemObject("note2","Notifications 2","");
            aMenuBar.addItem(subMenu,item);                
            

            //create menu item
            var item = new dhtmlXMenuItemObject("MainCustom","Custom Actions","");
            aMenuBar.addItem(aMenuBar,item);
            //create submenu
            var subMenu = new dhtmlXMenuBarPanelObject(aMenuBar,item,false,10,true);                
            
            var item = new dhtmlXMenuItemObject("custom1","Custom Actions 1","");        
            aMenuBar.addItem(subMenu,item);                        
            var item = new dhtmlXMenuItemObject("custom2","Custom Actions 2","");        
            aMenuBar.addItem(subMenu,item);        
            var item = new dhtmlXMenuItemObject("custom3","Custom Actions 3","");        
            aMenuBar.addItem(subMenu,item);        

            aMenuBar.showBar();

            flag = true;

            var glob_timer;
            var value = dhtmlxEvent(aMenuBar.topNod,_isIE?"mouseleave":"mouseout",function(){
             glob_timer=setTimeout("hide(aMenuBar)",1000);
            });

            var value = dhtmlxEvent(aMenuBar.topNod,"mouseover",function(){
             window.clearTimeout(glob_timer)
            });

            }
        }

        function hide(aMenuBar) {
            aMenuBar.hideBar();
            flag=false;
        }

    </script>
</head>

<body>

<input type="button" onclick="javascript:showmenu();" id="toolbarbutton" value ="DISPLAY REGULAR MENU" name="toolbarbutton">
<div id="altermenu" style="position:absolute;z-index:1;display:inline;top:30px;left:10px;"></div>
</div>
<br><br><br>
<table border><tr><td>ROW 1</td></tr><tr><td>ROW 2</td></tr><tr><td>ROW 3</td></tr><tr><td>ROW 4</td></tr></table>
</body>
</html>
Answer posted by Support on Oct 15, 2008 09:38
Each panel of menu is separate object, they doesn't share common parent so it is not possible to attach events to all panels at once. 
You can modify source code of dhtmlxmenu.js and add the same events code directly to constructor of panel so it will be applied to any panel of menu. 
dhtmlxmenu.js , line 152 
function dhtmlXMenuBarPanelObject(....){
...
//this.topNod - point to html element
//any custom event code can be placed here
}
Answer posted by Jupi on Oct 15, 2008 10:09
Hi I tried what you said, but seems not to work. Can you please send the working code for the same sample. I mean the code that should be put in the dhtmlmenubar.js file.