Grow your CSS skills. Land your dream job.

If input has value higher than 0

  • # February 9, 2013 at 5:30 am

    I have a search input where I’d like a span to fadeIn when a user starts typing. Would anyone mind helping me out with this?

    http://codepen.io/chrisburton/pen/zgwis

    # February 9, 2013 at 6:37 am

    Here ⇒ http://jsfiddle.net/tovic/43eG7/69/

    # February 9, 2013 at 5:28 pm

    Thanks very much @hompimpa. I’ll have to take a look at it when I’m feeling a little better.

    By the way, what site can I use to credit you for the code?

    # February 9, 2013 at 8:25 pm

    @Hompimpa For some reason I’m getting a conflict with the two codes together.

    The first code is for clearing the input and the other is for fading in the button when the user starts typing.

    http://codepen.io/chrisburton/pen/zgwis

    Edit: My fault. I forgot to add the hidden class. Although I do have to hit backspace in the input for it to fade out.

    # February 10, 2013 at 4:56 am

    No credit. Here’s a complete function to show/hide the [×] button and also hide the × itself if you click the × —plus, reset the input value:

    $('.searchform input').on("keyup", function() {
    // check if the value isn't empty...
    if (this.value.length) {
    $('.clear').stop(true, true).fadeIn()
    .on("click", function() {
    // Also, fade-out the `x` button on click
    $(this).fadeOut();
    // and reset the input value
    $('.searchform input').val('');
    });
    } else {
    $('.clear').stop(true, true).fadeOut();
    }
    });

    Demo: http://jsfiddle.net/tovic/43eG7/70/

    # February 10, 2013 at 4:25 pm

    Works like a charm @hompimpa. Good work. I’m crediting you regardless, I just won’t have a URL to put for you. Thanks again.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

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