4347 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();        
});
369 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

4347 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 ;)

4347 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

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by