jimfog Posted October 8, 2014 Share Posted October 8, 2014 I have made 2 dropdown menus and I want when the user makes a selection to one of them(for the sake of brevity I do my testing only to the one menu) the selection is highlighted and the highlight immediately removed(fading in other words). The code with which I am trying to accomplish the above is here http://jsfiddle.net/fiddlehunt/achgnmcv/ I am making my tests with the from menu. And now my problem... Despite highlighting takes place(by adding a specific class as you see in the code),when the class is removed, the element(drop menu) is completely hidden from view. I really cannot explain this behavior....just try to make a selection in the from menu. How can I fix it? As I mention again the goal here is that the class/effect is added/removed gradually. Link to comment Share on other sites More sharing options...
justsomeguy Posted October 8, 2014 Share Posted October 8, 2014 http://api.jquery.com/fadeout/Description: Hide the matched elements by fading them to transparent.Fadeout is not for gradually removing classes, it is for hiding elements. Link to comment Share on other sites More sharing options...
jimfog Posted October 8, 2014 Author Share Posted October 8, 2014 http://api.jquery.com/fadeout/Fadeout is not for gradually removing classes, it is for hiding elements. Yes I saw that...and I am searching what else can I do to solve the issue. Link to comment Share on other sites More sharing options...
davej Posted October 8, 2014 Share Posted October 8, 2014 Perhaps jQuery highlight or CSS3 transition. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 8, 2014 Share Posted October 8, 2014 http://jsfiddle.net/achgnmcv/26/ works, but had to change to lower version of jquery, and use ui jquery library, but it works on my local server with <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> versions. Link to comment Share on other sites More sharing options...
jimfog Posted October 9, 2014 Author Share Posted October 9, 2014 Yes....that worked thanks. The only thing I changed was the animation of the duration...which was fast for what I wanted. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 11, 2014 Share Posted October 11, 2014 (edited) option to prevent selection of 'till' time being less than 'from' time var HL_duration = 1500; $(function() { $("#timesfrom,#timestill").change(function() { $("#timestill option").attr('disabled', false); $("#timesfrom,#timestill").find('option').removeAttr('style'); if ($("#timestill").val() < $(this).val()) { $("#timestill option[value=" + $(this).val() + "]").prop("selected", true); } $("#timestill option").each(function() { if ($(this).val() < $("#timesfrom").val()) { $(this).attr('disabled', true); $(this).css({'background-color': '#F5F5F5'}); } }); $(this).stop(true, true).css({'background-color': '#ffff00'}).animate({'background-color': 'transparent'}, HL_duration); }); EDIT: slight change in code. IF you which it to target next time period (from time = 8:00, till time = 8: 30) use .next() $("#timestill option[value=" + $(this).val() + "]").next().prop("selected", true); and if ($(this).val() <= $("#timesfrom").val()) { $(this).attr('disabled', true); $(this).css({'background-color': '#F5F5F5'}); } Edited October 11, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now