Home › Forums › JavaScript › On body click, hide search
- This topic is empty.
-
AuthorPosts
-
April 21, 2013 at 6:23 am #44274chrisburtonParticipant
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’);
});April 21, 2013 at 6:37 am #132568chrisburtonParticipantI 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 #132569CodeGraphicsParticipantGood
April 21, 2013 at 7:08 am #132571pixelgridParticipantyou 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 #132572CrocoDillonParticipantPixelgrid 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 #132573chrisburtonParticipant@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 #132574CrocoDillonParticipantYou 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 #132575pixelgridParticipantthis is a quick pen http://codepen.io/anon/pen/lJnqt
April 21, 2013 at 7:24 am #132576chrisburtonParticipant@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 #132577pixelgridParticipanti have prefixfree activated right? is sliding on my end
April 21, 2013 at 7:35 am #132578CrocoDillonParticipant@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 #132579chrisburtonParticipant@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 #132580chrisburtonParticipant@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 #132581pixelgridParticipanti 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 #132582pixelgridParticipantfor 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.