4483 posts ThemeForest Senior Reviewer
  • Affiliate Level 1
  • Author Level 6
  • Collector Level 3
  • Envato Team
+14 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
  • 5 Years of Membership
  • Affiliate Level 2
  • Author Level 5
  • Collector Level 2
+8 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();        
});
422 posts plop
  • Weekly Top Seller
  • Elite Author
  • Author Level 7
  • 6 Years of Membership
+9 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
  • 5 Years of Membership
  • Affiliate Level 5
  • Author Level 9
  • Bundle Boss
+8 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

4483 posts ThemeForest Senior Reviewer
  • Affiliate Level 1
  • Author Level 6
  • Collector Level 3
  • Envato Team
+14 more
Ivor
Envato team
says

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

1012 posts
  • 5 Years of Membership
  • Affiliate Level 2
  • Author Level 5
  • Collector Level 2
+8 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 ;)

4483 posts ThemeForest Senior Reviewer
  • Affiliate Level 1
  • Author Level 6
  • Collector Level 3
  • Envato Team
+14 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
  • 5 Years of Membership
  • Affiliate Level 2
  • Author Level 5
  • Collector Level 2
+8 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
  • 5 Years of Membership
  • Affiliate Level 5
  • Author Level 9
  • Bundle Boss
+8 more
duotive
says

js selectors != css selectors

1012 posts
  • 5 Years of Membership
  • Affiliate Level 2
  • Author Level 5
  • Collector Level 2
+8 more
wizylabs
says

js selectors != css selectors

+1

by
by
by
by
by
by