4336 posts ThemeForest Reviewer
  • Has referred 1+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Member of the Envato Team
+12 more
Ivor Envato team says

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?

1012 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 10+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
+6 more
wizylabs says
jQuery(':not(#search)').click(function () {
    jQuery('#search').stop().animate({ "top": "-55px" }, "slow");
    // And the open button will appear
    jQuery('a#open').fadeIn();        
});
368 posts plop
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Has been part of the Envato Community for over 5 years
  • Made it to the Authors' Hall of Fame
+8 more
kimonothemes says

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.

3007 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 200+ members
  • Has sold $250,000+ on Envato Market
  • Had an item featured in an Envato Bundle
+7 more
duotive says

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

4336 posts ThemeForest Reviewer
  • Has referred 1+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Member of the Envato Team
+12 more
Ivor Envato team says

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

1012 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 10+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
+6 more
wizylabs says

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

It will in jQuery, jQuery have developed their own one ;)

4336 posts ThemeForest Reviewer
  • Has referred 1+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Member of the Envato Team
+12 more
Ivor Envato team says


: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 :(

1012 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 10+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
+6 more
wizylabs says



: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();        
});
3007 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 200+ members
  • Has sold $250,000+ on Envato Market
  • Had an item featured in an Envato Bundle
+7 more
duotive says

js selectors != css selectors

1012 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 10+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
+6 more
wizylabs says

js selectors != css selectors

+1

by
by
by
by
by
by