Home › Forums › JavaScript › On body click, hide search
- This topic is empty.
-
AuthorPosts
-
April 21, 2013 at 6:23 am #44274
chrisburton
ParticipantWhen 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’);
});April 21, 2013 at 6:37 am #132568chrisburton
ParticipantI 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’);
});Update: Damn. I just noticed that if I go to click in the input, it hides the search bar. This is tricky.
April 21, 2013 at 6:54 am #132569CodeGraphics
ParticipantGood
April 21, 2013 at 7:08 am #132571pixelgrid
Participantyou 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
April 21, 2013 at 7:11 am #132572CrocoDillon
ParticipantPixelgrid 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.
April 21, 2013 at 7:16 am #132573chrisburton
Participant@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.
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.
April 21, 2013 at 7:21 am #132574CrocoDillon
ParticipantYou 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`.
April 21, 2013 at 7:24 am #132575pixelgrid
Participantthis is a quick pen http://codepen.io/anon/pen/lJnqt
April 21, 2013 at 7:24 am #132576chrisburton
Participant@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.April 21, 2013 at 7:27 am #132577pixelgrid
Participanti have prefixfree activated right? is sliding on my end
April 21, 2013 at 7:35 am #132578CrocoDillon
Participant@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.April 21, 2013 at 7:36 am #132579chrisburton
Participant@pixelgrid Yes but when you click the search bar (blue background with the word “search” inside it) the input jumps up slightly.
April 21, 2013 at 7:37 am #132580chrisburton
Participant@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:
IE:
April 21, 2013 at 7:40 am #132581pixelgrid
Participanti updated the pen to act according to the current state of the form(opened closed) when you press search while the form is open
April 21, 2013 at 7:44 am #132582pixelgrid
Participantfor 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
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.