What do you think about this jQuery snippet?

Hey guys the code is commented and you’ll see what I’m trying to do. My question is: Is ok to apply the click method to the body? I don’t want troubles

// When the user hover the open button
jQuery('a#open').hover(function () {
    // The Search box will animate
    jQuery('#search').stop().animate({ "top": "0px" }, "slow");
    // And the open link will disappear
    jQuery('a#open').fadeOut();        
});
    // When the user clicks outside the searchbox it'll slideUp
jQuery('body').click(function () {
    jQuery('#search').stop().animate({ "top": "-55px" }, "slow");
    // And the open button will appear
    jQuery('a#open').fadeIn();        
});

EDIT : Yes this will give me issues, how I’m supposed to place the cursor inside the input form? It’ll slide up. Damn! Any ideas?

jQuery(':not(#search)').click(function () {
    jQuery('#search').stop().animate({ "top": "-55px" }, "slow");
    // And the open button will appear
    jQuery('a#open').fadeIn();        
});

What about a mouseleave() on the input text? Supposing your user is clicking inside the input to type what he is looking for without moving his mouse out.

wizylabs said

jQuery(':not(#search)').click(function () {
    jQuery('#search').stop().animate({ "top": "-55px" }, "slow");
    // And the open button will appear
    jQuery('a#open').fadeIn();        
});

nice selector wiz

:not is a css3 selector, it won’t work in IE7 and 8

IvorPadilla said
:not is a css3 selector, it won’t work in IE7 and 8

It will in jQuery, jQuery have developed their own one

wizylabs said

IvorPadilla said
:not is a css3 selector, it won’t work in IE7 and 8

It will in jQuery, jQuery have developed their own one

Thanks man, I’m trying

jQuery('body').not('#search').click(function () {
    jQuery('#search').stop().animate({ "top": "-55px" }, "slow");
    // And the open button will appear
    jQuery('a#open').fadeIn();        
});

But it doesn’t work

IvorPadilla said

wizylabs said

IvorPadilla said
:not is a css3 selector, it won’t work in IE7 and 8

It will in jQuery, jQuery have developed their own one

Thanks man, I’m trying

jQuery('body').not('#search').click(function () {
    jQuery('#search').stop().animate({ "top": "-55px" }, "slow");
    // And the open button will appear
    jQuery('a#open').fadeIn();        
});

But it doesn’t work

now try this and test it in IE7 and see what happens

jQuery(':not(#search)').click(function () {
    jQuery('#search').stop().animate({ "top": "-55px" }, "slow");
    // And the open button will appear
    jQuery('a#open').fadeIn();        
});

js selectors != css selectors

duotive said
js selectors != css selectors

+1