Master Pages, Themes and Navigation Controls

Re: I need some help with delaying the menu control

yupinggang — Wed, 04 Nov 2009 11:50:20 GMT

The Ace:
I want to do exactly the opposite of this. The menu i am using has more than 1000 items in it. Whenever a user hovers on the menu it takes 3-4 seconds atleast for the flyout to display. Is there a way to make the javascript work fast?

The same menu opened in Mozilla shows the flyouts in almost real time. So i think the javascript engine in IE has some issues. Any help or suggestion is greatly appreciated.

Wow! I can't imagine having more than 1,000 items in the menu.

Is JavaScript necessary for your menu to function properly? If it is not, you could use CSS alone to display the menu.

The delay might also be due to the fact that you have a huge amount of menu items.

By the way, which IE version are you using?

Re: I need some help with delaying the menu control

The Ace — Wed, 04 Nov 2009 05:57:21 GMT

I want to do exactly the opposite of this. The menu i am using has more than 1000 items in it. Whenever a user hovers on the menu it takes 3-4 seconds atleast for the flyout to display. Is there a way to make the javascript work fast?

The same menu opened in Mozilla shows the flyouts in almost real time. So i think the javascript engine in IE has some issues. Any help or suggestion is greatly appreciated.

Re: I need some help with delaying the menu control

MNF — Wed, 04 Jun 2008 23:10:26 GMT

yupinggang

Thank you for the script. It works great.
I've slightly modified it( put in a separate JS file,call initMenuMouseHoverInterceptors just in the same file,added handling in case if no menu on the page etc.) and posted here.

Re: I need some help with delaying the menu control

skynyrd — Fri, 25 Apr 2008 11:46:28 GMT

Wow that is amazing.

I tested it and it works very well

I just had to change this part:

ref_overrideMenu_HoverStatic = overrideMenu_HoverStatic;
overrideMenu_HoverStatic = My_overrideMenu_HoverStatic;

ref_overrideMenu_HoverStatic = Menu_HoverStatic;
Menu_HoverStatic = My_overrideMenu_HoverStatic;

Thanks!

Re: I need some help with delaying the menu control

yupinggang — Fri, 25 Apr 2008 10:53:16 GMT

Take a look at the following:

http://blogs.msdn.com/howard_dierking/archive/2007/04/23/polymorphic-javascript-well-kind-of.aspx?CommentPosted=true#commentmessage

Thanks to the author, I am now able to delay expanding of menu

when you move your mouse over it. The solution works great for me although it may not be efficient.

The menu won't expand unless you stay on the menu for a specific amount of time.

Here's the code I put in my master page, between the <head> and </head> tags.

(Remember to call the function initInterceptors() in <body> tag, <body onload="initInterceptors()" ..>)

1    <!-- @BEGIN:: JavaScript to prevent the expanding of static menu when you quickly mouse over them -->
2    	<!-- A big thanks to hdierking -->
3    	<!-- Reference website: http://blogs.msdn.com/howard_dierking/archive/2007/04/23/polymorphic-javascript-well-kind-of.aspx?CommentPosted=true#commentmessage -->	
4    	<script type="text/javascript">
5    		var myVar;
6    		var myTimeoutID;
7    		var myNode, myData;
8    		var ref_Menu_HoverStatic;
9    		var ref_Menu_Unhover;
10   		var ref_overrideMenu_HoverStatic;
11   		
12   		// This function is called in <body onload="...">
13   		function initInterceptors()
14   		{
15   			// *** Interceptors ***
16   			// @:: Menu_Hover
17   			ref_Menu_HoverStatic = Menu_HoverStatic;
18   			Menu_HoverStatic = My_Menu_HoverStatic;
19   			
20   			// @:: Menu_Unhover
21   			ref_Menu_Unhover = Menu_Unhover;
22   			Menu_Unhover = My_Menu_Unhover;
23   			
24   			// @:: overrideMenu_HoverStatic
25   			ref_overrideMenu_HoverStatic = overrideMenu_HoverStatic;
26   			overrideMenu_HoverStatic = My_overrideMenu_HoverStatic;
27   		}
28   		
29   		function My_Menu_HoverStatic(item)
30   		{	
31   			My_overrideMenu_HoverStatic(item);
32   		}
33   		
34   		function My_overrideMenu_HoverStatic(item)
35   		{
36   			var node = Menu_HoverRoot(item);
37   		    var data = Menu_GetData(item);
38   			myNode=node;
39   			myData=data;
40   		    if (!data) return;	
41   			
42   			myVar = item;			
43   			myTimeoutID=setTimeout("My_DelayExpandMenu(myNode,myData)",200);
44   		}
45   	
46   		function My_DelayExpandMenu(node, data)
47   		{	
48   		    __disappearAfter = 100; //data.disappearAfter;
49   		    Menu_Expand(node, data.horizontalOffset, data.verticalOffset); 
50   		}
51   	
52   		function My_Menu_Unhover(item)
53   		{		
54   			clearTimeout(myTimeoutID);
55   			ref_Menu_Unhover(item);
56   		}
57   		              
58       </script>
59   	<!-- ~END:: JavaScript to prevent the expanding of static menu when you quickly mouse over them -->
60

Re: I need some help with delaying the menu control

archetech — Mon, 25 Feb 2008 20:19:42 GMT

I know it's been a while since this post, but I didn't find any good solutions anywhere, so I thought I would reply. I was able to achieve this. I wrapped the menu control in a user control (one could achieve the same thing by extending it with a server control) and overrode it's render method to replace the javascript calls with calls to a javascript function that call Menu_HoverStatic via the setTimeOut method. The setTimeOut method was mentioned above, but the solution was incomplete and referenced 'this' in the function expression. Here is the code:

//Global javascript variables

var sendingCel;

var outID;

//Two javascript funcions

function CallMenuDelayed(sender)

{

sendingCel = sender;

outID = setTimeout('Menu_HoverStatic(sendingCel)',250);

}

function CloseMenuDelayed(sender)

{

clearTimeout(outID);

Menu_Unhover(sender);

}

//override the render method of the user control or server control

protected override void Render(HtmlTextWriter writer)

{

StringBuilder stringBuilder = new StringBuilder();

StringWriter stringWriter = new StringWriter(stringBuilder);

HtmlTextWriter htmlWriter = new HtmlTextWriter(stringWriter);

base.Render(htmlWriter);

string html = stringBuilder.ToString();

html = html.Replace("onmouseover=\"Menu_HoverStatic(this)\"", "onmouseover=\"CallMenuDelayed(this)\"");html = html.Replace("onmouseout=\"Menu_Unhover(this)\"", "onmouseout=\"CloseMenuDelayed(this)\"");

writer.Write(html);

}

Re: I need some help with delaying the menu control

skynyrd — Tue, 18 Sep 2007 13:05:38 GMT

I managed to delay the expand response by using this code:

function pause( iMilliseconds )
{
var sDialogScript = 'window.setTimeout( function () { window.close(); }, ' + iMilliseconds + ');';
window.showModalDialog('javascript:document.writeln ("<script>' + sDialogScript + '<' + '/script>")');
}

pause( iMilliseconds ) Cause the single Javascript thread to hald/pause/sleep/wait for a specified period of time, by opening in modalDialog window (IE only) that modally locks the browser until it returns. This modal dialog is not opened to any page, but uses the Javascript: protocol to execute a javascript setTimeout. In this modal context the setTimeout, has the desired affect of preventing any other script execution. The sole purpose of the timeout execution script is to close the modal dialog which will return control/unluck the browser. The intention was to find a way to allow the UI to be updated and rendered in the middle of function/method without the need to split the method up, remove nested calls, or use closures. Used in this fashion to update the UI, a 0 (zero) is usually passed (or optionally omitted altogether) so that the only delay is for the UI to render

source: http://www.ozzu.com/ftopic66049.html

Unfortunately, there is a huge problem:

After the delay, the menu will always expand!

The idea is to not expand at all, if the user hovers the menu for a short period of time.

I think the only way is to override the menu control.

Re: I need some help with delaying the menu control

skynyrd — Tue, 18 Sep 2007 11:46:18 GMT

Try this:

Re: I need some help with delaying the menu control

Curious.net — Tue, 18 Sep 2007 02:04:32 GMT

I am looking for a solution to the same problem. Please note that we are using asp.net menu control and looking at other controls is not an option. Upon inspeaction looks to me that the control renders the javascrip function "Menu_HoverDynamic" function. (Look at the following rendered HTML). I tried to disect the source code (Using reflector) for menu control to see the implementation of the javascript but looks like it is obfuscated. I am wondering if anybody can give me hints on overriding this function or any other means of providing a delay setting for Menu control onmouseover event.

Thanks

Re: I need some help with delaying the menu control

Johnson2007 — Tue, 11 Sep 2007 02:12:10 GMT

The standdard asp.net menu control used the onhover mouse event to expand the submenu. when the mouse over it, it will expand immediatly. I think you can implement this using the current menu control. May be you can find some other menu control. Look at this menu to to see whether it cover you requires? http://www.scbr.com/docs/products/dhtmlxMenu/index.shtml . This menu even support expanding the submenu by clicking on the static menu.

However I also think delay some second is neddless.

Re: I need some help with delaying the menu control

machta — Mon, 10 Sep 2007 17:28:02 GMT

I think you should use JavaScript for this. Or you have to do menu without it.

I think that it's needless and I see no reason ...

I need some help with delaying the menu control

bryankia — Mon, 10 Sep 2007 17:06:19 GMT

When the user drags their mouse over the menus the drop down is activated immmediately. how do I delay this for a very short period of time.

Thanks,

Bryan

PS this has got to be easy but will be darned I can not find it.