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
//
//Example of usage:
//loaded from http://forums.asp.net/t/1156758.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
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 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;
//