We are using asp.net Menu control and wanted to have some delay before sub-menu popup to avoid annoying popup, if user just move mouse through menu area.
After some search on Google I found the solution submitted by yupinggang on the thread delaying the menu control.
I've slightly modified it( put in a separate JS file,call initMenuMouseHoverInterceptors just in the same file,added handling of the case if no menu on the page etc.)
Another possible solution- override PreRender in derived from Menu control(mentioned in the same thread and in Menu Control - Use OnClick instead of OnMouseOver thread) requires more work and less elegant.
FILE: Menu_HoverStaticDelay.js
// <!-- @BEGIN:: JavaScript to prevent the expanding of static menu when you quickly mouse over them -->
//Example of usage: <script language="javascript" type="text/javascript" src="JS/TopNav/Menu_HoverStaticDelay.js"></script>
//loaded from http://forums.asp.net/t/1156758.aspx
// <!-- A big thanks to hdierking for article Polymorphic Javascript -->
// <!-- Reference website: http://blogs.msdn.com/howard_dierking/archive/2007/04/23/polymorphic-javascript-well-kind-of.aspx -->
var constShowDelay=500;//ms- configurable
var constDisappearDelay=800;//ms- configurable
var myVar;
var myTimeoutID;
var myNode, myData;
var ref_Menu_HoverStatic;
var ref_Menu_Unhover;
var ref_overrideMenu_HoverStatic;
// This function is called in <body onload="...">
function initMenuMouseHoverInterceptors()
{
// *** Interceptors ***
// @:: Menu_Hover
//debugger;
//handle case if no menu on the page
if((typeof(Menu_HoverStatic)!='undefined'))
{
ref_Menu_HoverStatic = Menu_HoverStatic;
Menu_HoverStatic = My_Menu_HoverStatic;
// @:: Menu_Unhover
ref_Menu_Unhover = Menu_Unhover;
Menu_Unhover = My_Menu_Unhover;
// @:: overrideMenu_HoverStatic
ref_overrideMenu_HoverStatic = Menu_HoverStatic;//corrected by skynyrd
Menu_HoverStatic = My_overrideMenu_HoverStatic;
}
}
function My_Menu_HoverStatic(item)
{
My_overrideMenu_HoverStatic(item);
}
function My_overrideMenu_HoverStatic(item)
{
var node = Menu_HoverRoot(item);
var data = Menu_GetData(item);
myNode=node;
myData=data;
if (!data) return;
myVar = item;
myTimeoutID=setTimeout("My_DelayExpandMenu(myNode,myData)",constShowDelay);//COnfigurable
}
function My_DelayExpandMenu(node, data)
{
__disappearAfter = constDisappearDelay; //data.disappearAfter;
Menu_Expand(node, data.horizontalOffset, data.verticalOffset);
}
function My_Menu_Unhover(item)
{
clearTimeout(myTimeoutID);
ref_Menu_Unhover(item);
}
//Global call to initMenuMouseHoverInterceptors seems enough.
//Alternatively call Page.ClientScript.RegisterStartupScript(Me.GetType, "MyFunction", "initMenuMouseHoverInterceptors();", True)
//Alternatively consider to call the function initMenuMouseHoverInterceptors() in <body> tag, <body onload="initInterceptors()" ..>)
//If using ASP.NET AJAX documentation, call Sys.Application.add_Load or include in pageLoad function( but only one per page is allowed)
/* function pageLoad()
{initMenuMouseHoverInterceptors();
}
*/
initMenuMouseHoverInterceptors();
// <!-- ~END:: JavaScript to prevent the expanding of static menu when you quickly mouse over them -->