Override ASP.NET Menu javascript functions to delay dynamic menus popup.

 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: http://JS/TopNav/Menu_HoverStaticDelay.js

//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 –>