CODEWITHSUNDEEP
jqueryfocusblur
rob waminal
rob waminal

Reputation: 18429

jquery on blur but focus on the other one

I have a situation that i have a hidden div with two input elements where it hides by default and only shows up if I hover something and disappears back if I hover out. Now I want that div not to disappear if one of the input element is focused and disappears if blurred. I have solved that part until, if the focus is transferred from one input to another, the div will disappear which I don't want it to disappear because one of the input is still focused.

Here's my code:

// code with the problem I think.
$('#inputText1, #inputText2').live("blur", function() {
    if ($('#myDiv').is(":visible")) {
        if (!$(this).hasClass("jqTransformInputWrapper_focus")) {
            $('#myDiv').fadeOut("slow");
        }
    }
});

// hover to show and hide the div
$(".visibleDiv").hover(
    function() {
        $('#myDiv').fadeIn("slow");
    },
    function() {
        if(!$(this).find(".jqTransformInputWrapper").hasClass("jqTransformInputWrapper_focus")) {
            $('#myDiv').fadeOut("slow");
        }
    }
);

My Html:

<div class="visibleDiv">
    hover me
    <div id="myDiv">
        <input name="inputText1" id="inputText1" type="text" />
        <input name="inputText2" id="inputText2" type="text" />
    </div>
</div>

BTW, I'm using jqTransform for the input elements.

Upvotes: 0

Views: 561

Answers (2)

Reigel Gallarde
Reigel Gallarde

Reputation: 65274

try this,

// code with the problem I think.
$('#inputText1, #inputText2').live("blur", function() {

    if ($('#myDiv').is(":visible")) {
        if (!$(this).hasClass("jqTransformInputWrapper_focus")) {
            $('#myDiv').fadeOut("slow");
        }
    }

}).live("focus",function(){
    $('#myDiv').stop(true,true).show();
});

Upvotes: 1

xkeshav
xkeshav

Reputation: 54074

give some class to input box and apply jQuery on that

<div class="visibleDiv">
    hover me
    <div id="myDiv">
        <input name="inputText1" id="inputText1" type="text" class="inputbox" />
        <input name="inputText2" id="inputText2" type="text" class="inputbox"/>
    </div>
</div>


// now this will work
$('.inputbox').live("blur", function() {
 // u can also use this
 // if($(this).parent().is(":visible") )
    if ($('#myDiv').is(":visible")) {
        if (!$(this).hasClass("jqTransformInputWrapper_focus")) {
            $('#myDiv').fadeOut("slow");
        }
    }
});

Note: use delegate instead of live

Upvotes: 0

Related Questions