Jump to content

addClass/removeClass problem


jimfog

Recommended Posts

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

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

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

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

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 by dsonesuk
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...