CODEWITHSUNDEEP
jquery
Phil
Phil

Reputation: 11175

jquery: div hide/show on focus issue

Thanks to inti's code I was able to figure out the answer!

jQuery:

$(document).ready(function(){
    $("body").click(function(e) {
        //checks to see if the tag you clicked has the #login
        //div as a parent.
        if($(e.target).closest("#login").size() == 0) {
            //makes exception for the #login's <a> tag (id of a_login)
            if((e.target.id) == 'a_login') {   
                $("#login").show();
            } else {
                $("#login").hide();
            }
        //if target has #login as parent, keep it visible   
        } else {
            $("#login").show();
        }
    });

});

Working jsfiddle example: http://jsfiddle.net/SuperPhil/3CmE7/

Thanks!

I am trying to have a login screen similar to the http://dropbox.com login. Where a user clicks on the login link and a div appears (CSS) and when focus out, disappears.

Here is my jQuery

$('#login').bind('click', function() {
    $('#login').addClass("clicked").focusout(function() {
        $('#login').removeClass('clicked');
    });
});

This doesn't work. Can anyone help me out?

EDIT:

$('#login').click(function() {
    $('#login div').addClass("clicked").blur(function() {
        $('#login div').removeClass('clicked');
    }); 

});

Upvotes: 0

Views: 3236

Answers (2)

aorcsik
aorcsik

Reputation: 15552

The event you are looking for is .blur() not .focusout().

Edit: click out of #mydiv to hide it:

$("body").click(function(e) {
    if ($(e.target).closest("#mydiv").size() == 0) {
        $("#mydiv").hide();
    }
});

This hides #mydiv if what you clicked doesn't have it as one of it's parents.

Upvotes: 3

Anish
Anish

Reputation: 2917

I think you r looking something like this...

HTML:

<a href="#">Click Me</a>

<div id="login">
    <label>Username:</label><input type="text"/><br/>
    <label>Password:</label><input type="password"/><br/>
</div>

jQuery:

$(document).ready(function(){
   $("#login").hide();
    $('a').bind('click', function() {
        $("#login").toggle().focus();
    });
    $("input").focusout(function(){
        $("#login").hide();
    });
});

http://jsfiddle.net/anish/ccFt9/1/

Upvotes: -1

Related Questions