jQuery focusout()

Question

I have a login box that slides/toggles up and down when an <a> link is clicked.

This is a DIV that is around 150px by 100px is size.

When someone clicks outside this DIV I want the DIV to slide backup. I've been playing with focusout() but I must have the wrong function.

Any advice? code below.

$('a#member_login').click(function(event) {
    event.preventDefault();
    $('div#member_login_container').slideToggle();
});

// Hide Login Box if Click outside the Login Box
$('div#member_login_container').focusout(function(event) {
    alert('here');
    //$('div#member_login_container').slideUp();
});

Have a look at this: http://stackoverflow.com/questions/1403615/use-jquery-to-hide-div-when-click-outside-it — Behrang, Sep 05 '11 at 09:59

score 3 · Accepted Answer · answered Sep 05 '11 at 09:59

3

You should check out blur

http://api.jquery.com/blur/

example: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_focus_blur

answered Sep 05 '11 at 09:59

JSantos

1,698
22
39

score 1 · Answer 2 · answered Sep 15 '12 at 03:49

1

A better version:

$("input.login_input").focus(function () {
    $(this).addClass("active");
    $(this).focusout(function () {
        $(this).removeClass("active");
    });
});

answered Sep 15 '12 at 03:49

Sliq

15,937
27
110
143

jQuery focusout()

2 Answers2