Grow your CSS skills. Land your dream job.

On body click, hide search

  • # April 21, 2013 at 6:23 am

    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

    # April 21, 2013 at 6:37 am

    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.

    # April 21, 2013 at 6:54 am

    Good

    # April 21, 2013 at 7:08 am

    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

    # April 21, 2013 at 7:11 am

    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.

    # April 21, 2013 at 7:16 am

    @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.

    # April 21, 2013 at 7:21 am

    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`.

    # April 21, 2013 at 7:24 am

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

    # April 21, 2013 at 7:24 am

    @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

    i have prefixfree activated right? is sliding on my end

    # April 21, 2013 at 7:35 am

    @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

    @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

    @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

    # April 21, 2013 at 7:40 am

    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

    # April 21, 2013 at 7:44 am

    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

Viewing 15 posts - 1 through 15 (of 22 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".