4317 posts ThemeForest Reviewer
  • Envato Staff
  • Reviewer
  • Community Moderator
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Venezuela
  • Has been a member for 5-6 years
  • Envato Studio (Microlancer) Beta Tester
  • Sold between 10 000 and 50 000 dollars
  • Exclusive Author
+9 more
Ivor Reviewer 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
  • Author had a Free File of the Month
  • Bought between 10 and 49 items
  • Egypt
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 10 and 49 users
  • Sold between 10 000 and 50 000 dollars
+1 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();        
});
367 posts plop
  • Elite Author
  • Sold between 50 000 and 100 000 dollars
  • Beta Tester
  • Has been a member for 5-6 years
  • Grew a moustache for the Envato Movember competition
  • Referred between 50 and 99 users
  • Interviewed on the Envato Notes blog
+3 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
  • Author had a File in an Envato Bundle
  • Bought between 1 and 9 items
  • Elite Author
  • Europe
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 100 and 199 users
+2 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

4317 posts ThemeForest Reviewer
  • Envato Staff
  • Reviewer
  • Community Moderator
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Venezuela
  • Has been a member for 5-6 years
  • Envato Studio (Microlancer) Beta Tester
  • Sold between 10 000 and 50 000 dollars
  • Exclusive Author
+9 more
Ivor Reviewer says

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

1012 posts
  • Author had a Free File of the Month
  • Bought between 10 and 49 items
  • Egypt
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 10 and 49 users
  • Sold between 10 000 and 50 000 dollars
+1 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 ;)

4317 posts ThemeForest Reviewer
  • Envato Staff
  • Reviewer
  • Community Moderator
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Venezuela
  • Has been a member for 5-6 years
  • Envato Studio (Microlancer) Beta Tester
  • Sold between 10 000 and 50 000 dollars
  • Exclusive Author
+9 more
Ivor Reviewer 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
  • Author had a Free File of the Month
  • Bought between 10 and 49 items
  • Egypt
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 10 and 49 users
  • Sold between 10 000 and 50 000 dollars
+1 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
  • Author had a File in an Envato Bundle
  • Bought between 1 and 9 items
  • Elite Author
  • Europe
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 100 and 199 users
+2 more
duotive says

js selectors != css selectors

1012 posts
  • Author had a Free File of the Month
  • Bought between 10 and 49 items
  • Egypt
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 10 and 49 users
  • Sold between 10 000 and 50 000 dollars
+1 more
wizylabs says

js selectors != css selectors

+1

by
by
by
by
by
by