Jquery toggle between focus

Question

ok my piece of code looks sth like this:

<div id="left" style="float:left; width:100px; margin-right:10px;">
<input id="first" value="something">
</div>
<div id="right" style="margin-left:20px; float:left; width:200px;">
<input id="second" value="something">
<input id="third" value="something">
<input id="fourth" value="something">
</div>

jquery:

$(function() {

$("#right").focusin(function() {
      $( "#left" ).animate({
        width: "200px"
      }, 500 ); 
      $( "#right" ).animate({
        width: "100px"
      }, 500 );   
});
$("#right").focusout(function() {
      $("#left").animate({
        width: "100px"
      }, 500 ); 
      $("#right").animate({
        width: "200px"
      }, 500 ); 
});

})

but when im clicking between inputs on right div it calls focusin/out, how to prevent this?

DEMO: https://jsfiddle.net/swfzmdfd/

score 0 · Answer 1 · answered Nov 07 '16 at 00:27

0

when you click on lets say third id after clicking on second id , basically both events get triggered, focusin in and focusout for elements under id right. that is why.

If you want to avoid that you can add click instead/

$("#right").click(function() {

// do this 
});
$("#left").click(function() {
 // do this 
});

answered Nov 07 '16 at 00:27

Saa_keetin

647
6
10

i do have a lot of elements left and right are not only on page, I need some sth like focusout or click everywhere but not left – Klemens Markowski Nov 07 '16 at 00:36

score 0 · Accepted Answer · answered Nov 07 '16 at 00:37

You can use a timer and not do the animation if the activeElement is one of the other inputs

$(function() {
    $("#right").focusin(function(e) {
        $("#left").stop(true,true).animate({
            width: "200px"
        }, 500);
        $("#right").stop(true,true).animate({
            width: "100px"
        }, 500);
    });
    $("#right").focusout(function() {
     setTimeout(function() {
         if ( !($(document.activeElement).closest('#right').length && 
                   $(document.activeElement).is('input'))) {
                $("#left").animate({
                    width: "100px"
                }, 500);
                $("#right").animate({
                    width: "200px"
                }, 500);
            }
        },100);
    });

})

input {
    width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="left" style="float:left; width:100px; margin-right:10px;">
    <input id="first" value="something">
</div>
<div id="right" style="margin-left:20px; float:left; width:200px;">
    <input id="second" value="something">
    <input id="third" value="something">
    <input id="fourth" value="something">
</div>

thanks! thats close to perfect, ill add some things and it will be best solution for now — Klemens Markowski, Nov 07 '16 at 01:22
the only bug is that when focusing out from input in this div = all ok but from any other element like space in that div then it does not work because i did right on click event and then focusout as Your demo i think i need to change it to focusin instead of click and forget about this since its working and does its job — Klemens Markowski, Nov 07 '16 at 02:14

Jquery toggle between focus

2 Answers2