Resource icon

Change popup menu delay

Jake Bunce

Well-known member
Jake Bunce submitted a new resource:

Change popup menu delay (version 1.x) - Javascript edit to change delay for the popup menu when mousing over a nav tab or other menu.

This will change the delay for popup menus in the navbar. For example:

View attachment 29019

Edit this file:

js/xenforo/xenforo.js

Change the number in red:

Rich (BB code):
XenForo.PopupMenu.prototype={__construct:function(a){this.$container=a;this.$menu=this.$container.find(".Menu").appendTo("body");this.menuVisible=!1;if(!this.$menu.length)return console.warn("Unable to find menu for Popup...

Read more about this resource...
 
Thanks for that. Nice feature ;)
I see you know js so i would like to ask if its possible to add something that will close the popup after mouse is leaving the popup menu.
Right now you need to click somewhere else to get the menu popup closed?!
Thanks a lot
 
I see you know js so i would like to ask if its possible to add something that will close the popup after mouse is leaving the popup menu.

Not really. I only have a fumbling knowledge of js right now. I am learning but I don't know how to do this off hand. Probably need the onmouseout event, though I'm not sure how to tie that into the existing js.
 
It was done because I wanted to include this right in the style, so user doesn't have to edit any xenforo files.
 
I changed that to 20 and that just seems the right value for me. Thanks Jake for this useful tip!
 
Is this Code Modification still valid, with XF 1.5+? I ask because I tried revising it (i.e. up to 5000) and couldn't tell any difference. :confused:
 
Well I was asking since it doesn't seem to work for me and I noticed this depreciation statement in the xenforo.js file…
Code:
A=function(t){return"string"!=typeof t||e.event.special.hover?t:(H.test(t)&&r("'hover' pseudo-event is deprecated, use 'mouseenter mouseleave'"),t&&t.replace(H,"mouseenter$1 mouseleave$1"))};e.event.props&&"attrChange"!

So I was wondering if this code (just under the hoverIntent r5 section of the file) was what now controlled the delay instead…?
Code:
(function($){$.fn.hoverIntent=function(f,g){var cfg={sensitivity:7,interval:100,timeout:0};cfg=$.extend(cfg,g?{over:f,out:g}:f);var cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY;};var compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);if((Math.abs(pX-cX)+Math.abs(pY-cY))<cfg.sensitivity){$(ob).unbind("mousemove",track);ob.hoverIntent_s=1;return cfg.over.apply(ob,[ev]);}
 
Last edited:
Well I was asking since it doesn't seem to work for me and I noticed this depreciation statement in the xenforo.js file…
Code:
A=function(t){return"string"!=typeof t||e.event.special.hover?t:(H.test(t)&&r("'hover' pseudo-event is deprecated, use 'mouseenter mouseleave'"),t&&t.replace(H,"mouseenter$1 mouseleave$1"))};e.event.props&&"attrChange"!

So I was wondering if this code (just under the hoverIntent r5 section of the file) was what now controlled the delay instead…?
Code:
(function($){$.fn.hoverIntent=function(f,g){var cfg={sensitivity:7,interval:100,timeout:0};cfg=$.extend(cfg,g?{over:f,out:g}:f);var cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY;};var compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);if((Math.abs(pX-cX)+Math.abs(pY-cY))<cfg.sensitivity){$(ob).unbind("mousemove",track);ob.hoverIntent_s=1;return cfg.over.apply(ob,[ev]);}

It should work. Be sure to do a hard refresh of the page (or restart your browser) to get the latest js after applying the modification.
 
It does not work for me to just change to 0.
I've tried Edge, Chrome etc and also removed cache. Anyone got a fix?
 
Back
Top Bottom