Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Jupi on Oct 14, 2008 12:13
open dhtmlx forum
Firefox issue in hiding menu

Thanks for your response. Please try to reconstruct this sample locally. There is time out logic for hiding the main Menubar which is in popup mode.
a) Works good in IE but not in firefox, the mouse out event gets triggered when the mouse is over the main menubar.
b) Also in IE, if the mouse is over the submenus, the menubar gets hide becoz of the mouseout function getting triggered. How to work around?

<!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">

<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('alertmenu'),20,20,"");
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;

if(flag == true){

if(!(_isIE)){
// document.getElementById('alertmenu').style.display = "block";
}
alert(document.getElementById('alertmenu').style.display);
var value = dhtmlxEvent(aMenuBar.topNod,_isIE?"mouseleave":"mouseout",function(){
setTimeout("hide(aMenuBar)",1000);
});
}
}
}

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="alertmenu" style="position:absolute;z-index:1;display:inline;top:30px;left:10px;"></div>
</div>
<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 02:31
You can try to change the code as 

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)
});