Geeks With Blogs

News My Blog has been MOVED to https://mfreidge.wordpress.com
Michael Freidgeim's OLD Blog My Blog has been MOVED to https://mfreidge.wordpress.com

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

     

 

Posted on Wednesday, June 4, 2008 11:04 AM ASP.NET , CSS/DHTML/JavaScript | Back to top


Comments on this post: Override ASP.NET Menu javascript functions to delay dynamic menus popup.

# re: Override ASP.NET Menu javascript functions to delay dynamic menus popup.
Requesting Gravatar...
Cool,

it might took me hours to find out what to do if i wanted to write the code myself

Thanks
Left by web development company on Aug 28, 2009 9:25 AM

# re: Override ASP.NET Menu javascript functions to delay dynamic menus popup.
Requesting Gravatar...
Great Solution.. Thanks to everyone who worked on this.
Left by Jeeva on Oct 07, 2009 9:33 AM

# re: Override ASP.NET Menu javascript functions to delay dynamic menus popup.
Requesting Gravatar...
i get the out of memory exeception at menu control after postback happens in that page. As you said, this should not called more than once. so, i have added the check of postback and that solves the problem.

i use AJAX.. so,

if (!args.get_isPartialLoad())
initMenuMouseHoverInterceptors
Left by Jeeva on Oct 27, 2009 6:40 AM

# re: Override ASP.NET Menu javascript functions to delay dynamic menus popup.
Requesting Gravatar...
I tried it, but can't get it working. Can you post a small example Project?
Left by Victor on Jul 03, 2012 6:34 PM

# re: Override ASP.NET Menu javascript functions to delay dynamic menus popup.
Requesting Gravatar...
May this helps others with the same problem:
You need to set <RenderingMode>-Property of the MenuConrol to "table" for this to work.
Left by Victor on Jul 23, 2012 6:46 PM

# re: Override ASP.NET Menu javascript functions to delay dynamic menus popup.
Requesting Gravatar...
This works great.

i want to mention an issue here when we are using div to show some pop up on screen. If we render the menu as table, then this solution creates a problem. The pop doesn't appear.

i acheived this with following javascript:

$(function () {
$("a.level2").hover(function () {
$("a.level3").stop(true, true).fadeToggle(1500).show();
}, function () {
$("a.level3").stop(true, true);
});
});

$(function () {
$("a.level3").hover(function () {
$("a.level4").stop(true, true).fadeToggle(1500).show();
}, function () {
$("a.level4").stop(true, true);
});
});
Left by Samit on May 22, 2015 5:34 PM

# re: Override ASP.NET Menu javascript functions to delay dynamic menus popup.
Requesting Gravatar...
Samit good for you.
I change code as:

$(document).ready(function () {
$("a.level1").hover(function () {
$("a.level2").stop(true, true).hide(1).show(500);
}, function () {
$("a.level2").stop(true, true);
});

$("a.level2").hover(function () {
$("a.level3").stop(true, true).hide(1).show(500);
}, function () {
$("a.level3").stop(true, true);
});


$("a.level3").hover(function () {
$("a.level4").stop(true, true).hide(1).show(500);
}, function () {
$("a.level4").stop(true, true);
});
});
Left by zolfaghari on Feb 21, 2016 10:55 PM

Your comment:
 (will show your gravatar)


Copyright © Michael Freidgeim | Powered by: GeeksWithBlogs.net