Question

I’m using the jQuery plugin hoverIntent to expand/shorten a div which has a form in it. As you can see below, the form is shown, when the div is tall.

How can I prevent the onMouseOut/makeShort from firing if any of the form fields have focus?

$(document).ready(function(){

    var config = {    
         over: makeTall, // function = onMouseOver callback (REQUIRED)    
         timeout: 650, // number = milliseconds delay before onMouseOut    
         out: makeShort // function = onMouseOut callback (REQUIRED)   
    };

    $("#mydiv").hoverIntent( config );

    function makeTall(){ 
            $(this).css({"height":100});
            $("#myForm").show('fast');
    }

    function makeShort(){
            $("#myForm").hide('fast');
            $(this).css({"height":50});
    }

});

I’m also open to suggestion if there is another more robust plugin for hover events.

Answer 1

Just check for active elements:

function makeTall(){ 
    $(this).css({"height":100});
    $("#myForm").show('fast');
}

function makeShort(){
    if (!$("#myForm").find(':focus').length) {
        $("#myForm").hide('fast');
        $(this).css({"height":50});
    }
}