Unwanted "blinking" in jquery dropdown menu?

Question

I have the following jQuery snippet:

$("#collapse-menu > li > a").click(function() { $(this).toggleClass("expanded").toggleClass("collapsed").find("+ ul").slideToggle("medium"); }); 

This basically expands or collapses the menu of nested "lists" that contain drop-down lists (simplified example):

 <ul id="collapse-menu"> <li><a class="expanded">Basic Details</a> <ul> <li> <select> .... </select> </li> <li> <select> .... </select> </li> 

The code works absolutely fine EXCLUDES when a large value is selected in any of the drop-down menus. At this point, when pressed, the menu will still expand / collapse correctly, but “flash quickly”, making it as if the entire item was reset in some way. The data itself is fine, but it flashes, which is undesirable.

The strange thing is that if a small value is selected in the drop-down list, it does not blink there. When a large value is selected (for example, above 30 in the 18-99 age drop-down list), it starts flashing.

Can someone tell me why this is happening? Or is there something wrong with jQuery that causes this.

Thanks.

UPDATE:

Adding generosity to this. We tried several similar plugins / solutions there on the network, but they all seem to suffer from this “flashing” problem when large drop-down values ​​are selected by default.

If this helps, here is a typical similar solution: http://www.i-marco.nl/weblog/jquery-accordion-menu/index_collapsed.html# ... but it suffers from the same problem when adding drop-down lists inside the accordion.

I hope someone has a clean solution, instead of hacking it somehow.

Answer 1

From my observation: the problem is with the operating system. The choice is chosen by the system, since they are system controls. On my Linux machine, I have no problem with blinking animations in the http://jsbin.com/ixake example. I expect you to test it on Windows (r)

It seems that the selection "scrolls" to the desired value each time it is repainted. And this happens during the animation.

The easiest solution would be to replace the system selection with html-select to remove the system dependency. There are unobtrusive jquery plugins that will do this for you.

Try this or choose any of here if the first was not too good.

After that, the animation should depend only on JS and styles.

Answer 2

I think the problem is that every time an item changes, the drop-down list scrolls to the selected item, which causes a blinking.

The answer will be to save each selection in javascript (swap, say), and then when the animation starts deselecting and then restores it when the animation stops. This will give you the same performance that you get when you have a small value, while maintaining the user's choice.

You can also make sure that the form cannot be submitted while it is in transition, otherwise you will get bad values.

Answer 3

I personally believe that autocompletion can indeed be a way. However, I had the idea that hiding a long selection, replacing a fake short one, would make the slide smoother. It seems to work better in the same browser that I tested (Firefox 3.0.18). Perhaps the code has been cleared, and there is an error that sometimes chooses not the default size due to internal scrollbars, but it should not be too hard to fake.

 $("#collapse-menu > li > a").click(function() { var was_expanded = $(this).hasClass('expanded'); var uls = $(this).toggleClass("expanded").toggleClass("collapsed").find('+ ul'); if (was_expanded) { $(this).parent().find('select').each(function() { var fake = $('<select class="fake"><option>' + $(this).val() + '</option></select>'); $(this).parent().append(fake); $(this).hide(); }) uls.slideUp('medium', function() { }); } else { $('.fake').remove(); $('select').show(); uls.slideDown('medium', function() { }); } }); 

Answer 4

What you can do is disable selection lists before the ul animation.

  $("#collapse-menu > li > a").click(function() { $(this) .toggleClass("expanded").toggleClass("collapsed") .find("+ ul").find("select").attr("disabled","disabled").end() .slideToggle("medium",function(){ $(this).find("select").each(function(){this.disabled=false;}); }); }); 

let them know and give a try.

You probably want to style (CSS) disabled selection lists so that they look identically uninfected.

---

NOTES

The above effect has a side effect: do not send selected values ​​when submitting the form. If this is a problem for you, I suggest that you either remove all parameters from the selection list except the selected parameter before the animation, and then add them back after the animation is complete. And if that doesn't work, then you will probably prefer to use HTML-style pick lists. This is the best variant.

ps do not try to use the readonly attribute in the select list ... it does not exist.