On body click, hide search

[chrisburton]

When clicking “Find” in my menu, it brings down the search bar. Unfortunately, to hide it again, you have to click “Find” a second time. Is there a way to just click anywhere and it hide?

jQuery:

$(‘.find’).click(function() {
$(‘.search’).slideToggle(‘slow’);
});

CodePen

[chrisburton]

I ended up getting it working but can any Javascript professionals check out my code?

$(‘.find’).click(function(event) {
event.preventDefault();
$(‘.search’).slideDown(‘slow’);
});

$(‘.find’).click(function(e) {
e.stopPropagation();
});

$(document).click(function() {
$(‘.search’).slideUp(‘slow’);
});

CodePen

Update: Damn. I just noticed that if I go to click in the input, it hides the search bar. This is tricky.

[CodeGraphics]

Good

[pixelgrid]

you can give focus to the search form as they click the seach icon and when they blur(click tab of out of the search input) you can hide it if there is no value entered

[CrocoDillon]

Pixelgrid beat me to it while writing the code:

var search = $(‘.search’);
$(‘.find’).click(function() {
search.slideDown(‘slow’).focus();
});
search.on(‘blur’, function() {
search.slideUp(‘slow’);
});

Only problem I’m trying to find the solution to is that when you click Find again it doesn’t hide it. This isn’t a big deal I think but it does play the animation again, which is weird.

[chrisburton]

@CrocoDillon I haven’t tested your code yet so while I do, what about this:

$(‘.find’).click(function(event) {
event.preventDefault();
$(‘.search’).slideDown(‘slow’);
});

$(‘.find, .search’).click(function(e) {
e.stopPropagation();
});

$(document).click(function() {
$(‘.search’).slideUp(‘slow’);
});

It seems to work perfectly. Below is a test on CodePen.

CodePen

Update: Thanks for the help guys. My solution seems to have the exact functionality I’m looking for. Although, it is a bit bulky but I can deal with that.

[CrocoDillon]

You can keep that for now, I would add focus on the input element though so users can start typing right away.

The problem with `stopPropagation` is that when you have other code somewhere on the page that relies on `$(document).click(…);`, it breaks when the user clicks on `.find` or `.search`.

[pixelgrid]

this is a quick pen http://codepen.io/anon/pen/lJnqt

[chrisburton]

@CrocoDillon What if I only plan to have `$(document).click(function() {…` for this particular functionality?

@pixelgrid So close. If only the search bar didn’t jump when clicking it.

[pixelgrid]

i have prefixfree activated right? is sliding on my end

[CrocoDillon]

@pixelgrid, jumping here too… when you mousedown on ‘Search’ the input loses focus, when you mouseup it gains focus again. That’s causing the ‘jump’.

@chrisburton, Then it’s not a problem I suppose, just something to keep in mind.

[chrisburton]

@pixelgrid Yes but when you click the search bar (blue background with the word “search” inside it) the input jumps up slightly.

[chrisburton]

@CrocoDillon Also, the reason I can’t use `.focus()` is because IE9+ causes the placeholder to be removed even if there’s nothing typed yet.

Chrome:

Click to zoom

IE:

Click to zoom

[pixelgrid]

i updated the pen to act according to the current state of the form(opened closed) when you press search while the form is open

[pixelgrid]

for the placeholder not being supported you can put the search with javascript and on blur if the search box is empty place Search as a value or dont change it if is any user input

[Author]

Posts