Comments (7)
mgol
commented on May 21, 2024
Thanks for the report. Can you provide a test case on JS Bin? Thanks!
Just to make it clear: does the animation work correctly with jQuery 1.11.3 and is only broken with 3.6.0? In which browsers?
from jquery-ui.
mgol
commented on May 21, 2024
I think the issue is you're triggering a drop hide animation on all submenus when you hover out of any of the menu entries. If you trigger the animation only on the proper one, the animation works fine.
from jquery-ui.
mgol
commented on May 21, 2024
See an example without the bug (code to find the proper element is quite hacky, I didn't focus on that part): https://jsbin.com/deholic/1/edit?html,css,js,output
from jquery-ui.
BSarmady
commented on May 21, 2024
-
As for JSBin, I don't have an account there you can just copy the html from above and drop into html tab and it try it. I just did and works as I mentioned.
-
When Using jquery-3.6.0 and jquery-UI-1.11.4 it works (just like your sample) but with jquery-3.6.0 and jquery-UI-1.12.1 it is broken.
-
With jquery-3.6.0 and jquery-UI-1.11.4 other features are broken which are not related to this issue. For an 11 years old website (passed EOL), I didn't want to spend more time to fix it. so I just downgraded jquery to 1.11.3.
-
This menu animation is one of very few components that are still used in new implementation and appreciate if its behavior can be fixed.
-
Your solution looks good and works, I don't remember exact scenario that concluded to closing all sub menus. but I think it was something related to user moving mouse fast over menus on a slow machines which would leave more than one menu open. so to recover, I closed all menus instead of just last one.
-
I remembered that we have similar animation on a different situation when clicking 'close all' button will closes multiple div and shows another div instead.
I made even a smaller case (drop the whole thing in jsbin html tab and it will work)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!--script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script-->
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
var MenuTimer;
$(function () {
setTimeout(function () {
$('.submenu').hide('drop', { direction: 'up' });
$('.title').show('drop', { direction: 'right' });
$('.menu a').blur();
}, 1000);
});
</script>
<style type="text/css">
.hidden { display: none; }
.title { position: absolute; top: 0px; left: 0px;background-color:red }
.submenu { position: absolute; top: 0px; left: 0px;background-color:green }
.menu { flex-grow: 2; display: flex; flex-direction: column; }
.header { height: 126px; }
</style>
</head>
<body>
<div class="header">
<div class="m-1 menu">
<div style="flex-grow:2; position:relative;">
<div class="title hidden">TITLE TITLE TITLE TITLE TITLE</div>
<div id="menu1" class="submenu">
<a href="#" class="button">Sub Menu 1</a>
</div>
<div id="menu2" class="submenu hidden">
<a href="#" class="button">Sub Menu 2</a>
</div>
</div>
</div>
</div>
</body>
</html>- Removing menu2 element will make animation work correctly on UI 1.12 too
- Changing UI to 1.11 with menu2 in place will make animation work correctly too.
I'm guessing it has something to do with final step of animation which should apply to all elements (0~n) in array but only applies to elements 1~n.
from jquery-ui.
mgol
commented on May 21, 2024
From my investigation, the issue is the mode method used to set the effect mode sets it to "none" when mode is "hide" but the element is already hidden. If you try to hide all the submenus with the animation, mode is called multiple times during the hiding process and in cases other than the first it gets set to "none" as the element is already marked as hidden.
That's all I can do for now; given the maintenance status of jQuery UI and the fact this is not a regression in 1.13 but older, it's unlikely to get fixed unless someone from the community submits a PR.
from jquery-ui.
BSarmady
commented on May 21, 2024
I would gladly use UI 1.13 with 3.6.0 if it worked, but this issue exist in 1.13 too.
Looking at repo changes, mentioned method was added in commit (b6bec79) Effects: Rewrite
changes were made in a commit at 2012-12-26 (before release of 1.11) but merged in after 2 years and before release of 1.12.0
Unfortunately the mentioned commit is very extensive and removing second if in method doesn't seem to be a viable scenario as it looks like lots of other methods rely on the way this method works now.
from jquery-ui.
mgol
commented on May 21, 2024
I would gladly use UI 1.13 with 3.6.0 if it worked, but this issue exist in 1.13 too.
I understand that. But we're not focusing on bugs that were introduced before 1.13, there are too few people involved in the project. It's been many years since that release so people already had to adapt to this issue in their projects.
If you want it fixed, your best chance is to try to fix it yourself and submit a PR. Otherwise, it'll likely stay unfixed.
from jquery-ui.
Related Issues (20)
- There are some inconsistencies with the current (and old) ThemeRoller HOT 1
- the select is not working in mobile HOT 2
- ui.tabs _isLocal fails if url contains username:password@ HOT 9
- Publishing older versions to NPM request HOT 1
- Cannot read properties of undefined (reading 'version') HOT 4
- User is not able to access the “Increment/decrement” hours and minutes button using “TAB” and “ARROWS” in the “Select time” dialogue. HOT 2
- Will there be build with jQuery 3.7.1? HOT 2
- Datepicker with custom yearRange; curent year in the middle of dropdown HOT 6
- conflict HOT 1
- The Slider range stops adjusting value when on developer tool device emulation mode HOT 1
- Fix the themeroller issue before releasing UI 1.13.3 HOT 1
- datepicker synchronization issue
- Accessibility: Autocomplete with remote datasource reads item value instead of item label to screen reader HOT 1
- When container is zoomed, Drag does not sync with mouse cursor HOT 4
- Chromebook touch issue HOT 1
- Update jQuery Color to 3.x
- SelectMenu Demo Error HOT 7
- Selectmenu click to browser browken HOT 1
- bug report HOT 1
- With the modal option set to true, elements in the background are still available in the AOM HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jquery-ui.