CODEWITHSUNDEEP
javascriptjquerybindsidebar
Manoz
Manoz

Reputation: 6617

How to hide div when Textbox is focused?

I have a sidebar that is acting fine until i click on body.

Happening in sidebar

  1. On click sidebar comes out and on mouseout it goes hidden.
  2. when input box inside sidebar is focused then it is should not hide.
  3. when input is not focused it follows step 1 nicely.

What i want-

When input is focused inside sidebar and at the same time when it is focused out because of body's input box focus then this sidebar should hide or on body click it should be hidden on action.

jQuery-

$(function(){

    $('.sidebar-alert').on('click',function(){
    $(this).animate({left:0},200);
    event.stopPropagation();   
}); 
    $('.sidebar-alert').on('mouseleave ',function(){

        if($(".focused-input").is(":focus"))
    {
        $('.sidebar-alert').show();
    }


        else
        {
            $('.sidebar-alert').animate({left:-295},200);

        }

    });
});

I am not able to bind mouseover and click for hiding sidebar.

JS fiddle

Updated fiddle

Upvotes: 1

Views: 877

Answers (2)

Jai
Jai

Reputation: 74738

You can add one more event and selector in this part of code snippet like this:

$('.sidebar-alert, .focused-input').on('mouseleave focusout', function () {
    if ($(".focused-input").is(":focus")) {
        $('.sidebar-alert').show();
    } else {
        $('.sidebar-alert').animate({
            left: -295
        }, 200);
    }
});

Upvotes: 1

Sushanth --
Sushanth --

Reputation: 55750

You can add the blur event for the input. That will take care of the issue that you have

 $(".focused-input").on('blur', function() {
     $('.sidebar-alert').animate({
          left: -295
     }, 200);
 });

Check Fiddle

Upvotes: 1

Related Questions