CODEWITHSUNDEEP
jqueryformstogglemouseovermouseout
mmdwc
mmdwc

Reputation: 1137

toggle search input when mouseenter a div, then hide search input when mouseout

I'm using a searchform on my website (I can't change the HTML structure as it's the searchform generated by Wordpress). I have a search icons, and my searchform is hidden. when mouseenter the search div, I want to toggle my searchform, the searchform stay visible when entering text inside, and when mouseout the divs, I want the searchform to hide, with the same animation as in my Jsfiddle.

I can't find a solution to do it. here is my HTML, I can't change the structure as it's the searchform generated by Wordpress :

<div id="search">
<form action="http://www.mmdwc.com" id="searchform" method="get">
<div>
<button type="submit" class="btn"  id="searchsubmit"><i class="fa fa-search"></i></button>
<input type="search" id="s" name="s" value="" />
</div>
</form>    
</div>

my CSS : 

body {margin-top:50px;background-color:black;text-align:right}

#search {
    display: inline-block;
    border-right: 1px solid #D3D3D3;
    margin-right: 10px;
    vertical-align: middle;
    padding-right: 5px;
}

#s {
    border-width: medium medium 1px;
    border-style: none none solid;
    border-color: -moz-use-text-color -moz-use-text-color #FFF;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
    background-color: #000;
    color: #D3D3D3;
    line-height: 12px;
    font-style: italic;
    margin-left: 5px;
    margin-right: 5px;
    display: none;
}

#searchsubmit {
    background-color: transparent;
    color: #FFF;
    border: medium none;
    cursor: pointer;
    font-size: 16px;
    margin-right: -5px;
}

and my jquery :

$( "#searchsubmit" ).stop().one( "mouseenter", function() {
    $("#s").animate({width: 'toggle'}, 200);
});

and a JSfiddle to see it in action (with the animation) :

http://jsfiddle.net/7hbp57my/

can anybody help me with this ?

thanks a lot for your help

Upvotes: 1

Views: 919

Answers (1)

Artur Filipiak
Artur Filipiak

Reputation: 9157

You shouldn't use mouseenter alone or at least not with toggle animation.
Using mouseenter you also have to set mouseleave event as the oposite action.

The element on which you should attach event handler is the whole #search div, not the button.

.stop() isn't required for the button as it doesn't perform any animation (you would rather stop input field animation: $("#s").stop().animate(...)).

one is used to execute an event handler only once. After the event is catched, it's immediately removed from the element and will not perform anymore. You don't want that for sure. If you need an event delegation use on instead.

// cache input element (good practice when you refer to the same object many times):
var s_field = $("#s");

// hover instead of mouseenter:
$( "#search" ).hover(
// on mouse over:
function() {
    // use 'show' instead of toggle:
    s_field.stop().animate({width: 'show'}, 200);
}, 
// on mouse out:
function(){
    // hide input field on "hover out" only when it has no focus:
    if(!s_field.is(":focus")){
        s_field.stop().animate({width: 'hide'}, 200);
    }
});

Optionaly, you can hide search element (and clear its value) when focus is removed from the field, by binding focusout event handler:

s_field.focusout(function(){
    // check if mouse pointer is over the element
    // otherwise search field will disapear before button is clicked
    if(!$( "#search" ).is(":hover")){
        s_field.val('').animate({width: 'hide'}, 200);
    }
});

JSFiddle

To better understand jQuery's .hover() handler (a shorthand equivalent for mouseenter and mouseleave):

$(element).hover( handlerIn, handlerOut );

Additional references:

Upvotes: 2

Related Questions