How to cancel jqueryui menu fading?

Question

I want to stop the disappearance of the jQueryUI menu .

Same context: FireFox 43, Linux / Debian / Sid, Jquery2.2, JqueryUI1.11.4, for this question; alpha-stage MELT monitor , free GPL software on Linux / Debian with the latest Firefox 38 or 43 on Linux; this is commit b505eccc1 ... on github

^{(JsFiddle MVCE example at the end of the question)}

In my webroot/nanoedit.js file I have a global variable mom_menucmdel that has a JqueryUI menu (drop down menu) in it. The mom_removecmdmenu function clears the globality and removes this menu from the DOM.

I want this menu to disappear and be deleted in just over 9 seconds if the user is not interacting. But if the user moves the mouse inside the menu, I want the fading to stop. So I coded:

  var curmenu = mom_menucmdel; curmenu.mousemove (function(ev) { console.log("momdelayrepl movefinishing ev=", ev, " curmenu=", curmenu); curmenu.finish(); }); setTimeout(function() { console.log("mom_cmdkeypress-delayedreplmenudestroy curmenu=", curmenu); curmenu.delay(100).fadeOut(800+75*dollvalseq.length, function () { console.log ("momdelayrepl finalfaderemove curmenu=", curmenu); mom_removecmdmenu(); }); }, 9500); 

next to line 427 of this nanoedit.js ; I understand that finish will abort the animation. But that does not work. Fading remains, and the menu disappears even after the mouse moves.

If you are brave enough to compile a MELT monitor, look at http: //localhost.localdomain: 8086 / nanoedit.html , enter $ e in textearea, then press the esc key.

---

JsFiddle Example (MVCE)

See this JsFiddle , which is a simplified version above; run it twice. First press the button and wait at least 10 seconds. The menu disappears and disappears. Then run it again, click the button and move the mouse inside the menu (maybe even selecting some item), the menu still disappears after about 10 seconds, but I want it to stay, possibly endlessly (in my nanoedit.js code the select function will delete it, in this JsFiddle I don't care)!

Answer 1

 var mymenu; var mybutton; var count = 0; var menuTO; function remove_menu() { if (!mymenu) return; console.log("removing mymenu=", mymenu); mymenu.remove(); } function fadeOutMenu() { console.log("fading mymenu=", mymenu); mymenu.delay(100).fadeOut(900, remove_menu); } $(document).ready(function() { mybutton = $("#mybutton_id"); mybutton.on("click", function() { count++; var menuid = "menuid_" + count; $("#mymenudiv_id").append("<ul class='menucl' id='" + menuid + "'</ul>"); mymenu = $("#" + menuid); mymenu.append("<li>first</li><li>counting " + count + "</li><li>last</li>") mymenu.menu({ select: function(ev, ui) { console.log("selected ui=", ui); $("#message_id").html("<b>selected</b> <i>" + ui.item.text() + "</i> menu#" + count); } }); mymenu.mousemove(function(ev) { console.log("mousemove ev=", ev); clearTimeout(menuTO); menuTO = setTimeout(fadeOutMenu, 9000); //mymenu.finish(); }) menuTO = setTimeout(fadeOutMenu, 9000); }) }) 

 ul.menucl { background-color: lightpink; color: navy; font-size: 80%; display: inline-block; } p.explaincl { font-size: 75%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <p> See <a href='http://stackoverflow.com/q/34818540/841108'>this SO question</a> </p> <h2> my menu </h2> <p class='explaincl'> First, try clicking the button, and do nothing more: the menu disappears in 10 sec. Then, try again, click the button, move the mouse inside the menu, it is still disappearing but I want it to stay!</p> <button id='mybutton_id'>click me</button> <div id='mymenudiv_id'> Here </div> <p id='message_id'> </p> 

I saved the Timeout identifier in the menuTO variable. Then on each mousemove I reset the Timeout so that the menu does not disappear if the mouse moves inside the menu.

Also remember, if your cursor is inside the menu but does not move, then it will disappear in the next 9-10 seconds.

Answer 2

The accepted answer will unnecessarily create and clear huge timeouts when the mouse moves.

You can use the built-in focus and blur menu event to better deal with this, as shown below:

  mymenu.menu({ focus: function(e, ui) { clearTimeout($(this).data('timeout')); } }); mymenu.on('menublur', function(e, ui) { var timeout = setTimeout(function() { console.log("fading mymenu"); }, 5000); $(this).data('timeout', timeout); }); mymenu.trigger('menublur'); // start the timeout for the first time 

menublur is an internal (documented) jquery ui event that fires when a menu item loses focus.

Note that we must bind the event that you want to fire manually using the on() method outside the options object.

Updated Fiddle