CODEWITHSUNDEEP
jquery
willdanceforfun
willdanceforfun

Reputation: 11240

Increasing and decreasing size of search box with jquery

I have a search box which when you click it, it increases in width, if you click outside of it, it checks to see if there is a value, and if not, decrease back to the original size.

I thought the following code would do the trick, but it does a little more than expected - ie you can keep clicking the box and it will just keep growing :D

ie 

$('#search').live('click',function(){

    $(this).animate({width:'+=60px'},300);

}).live('blur',function(){

    if($(this).val() == '') {

        $(this).animate({width:'-=60px'},300);

    }

});
​

I made a JS fiddle of the situation http://jsfiddle.net/7V93H/

How would one go about turning this into a toggle so that it performs properly?

Upvotes: 2

Views: 2582

Answers (6)

Ito
Ito

Reputation: 2167

Samples above have some issues. For example: if you type something in search box and blur it out, the box continues grows indefinitely. To fix it, you must put an empty conditional or placeholder conditional there. This following example is working on:

$(function() {

    $('#nav-search-input').focus(function() {
        //user has clicked on the input
        if ($(this).val() == '') {
            $(this).animate({width:'+=120px'},200);
        }
    });

    $('#nav-search-input').blur(function() {
        //user has clicked off the input

        //check its value
        if(!$(this).val()) {
            //return to old size
            $(this).animate({width:'-=120px'},200);
        }
    });
});

Upvotes: 1

hohner
hohner

Reputation: 11588

First of all, don't use live() because as of jQuery 1.7 it's deprecated. Use on() instead.

I don't think it's a good idea to use click as the binder, why don't you use blur and focus?

$('#search').focus(function() {
   // User has clicked on the input
   $(this).animate({width:'+=60px'},300);
});

$('#search').blur(function() {
   // User has clicked off the input

   // Check its value
   if(!$(this).val()) {
      // Return to old size
      $(this).animate({width:'-=60px'},300);
   }
});

If you want the change to be more slick, you can look into using animate to control the speed and motion of the change.

Upvotes: 0

The Alpha
The Alpha

Reputation: 146239

Live is deprecated, try this

$('#search').on('focus',function(){
    var $w=$(this).width();
    $(this).animate({width:$w+60+'px'},300);
})
.on('blur',function(){
    var $w=$(this).width();
    if($(this).val() == '') {
        $(this).animate({width:$w-60+'px'},300);
    }
});

An example is here. Working in chrome, ff and IE.

Update: This one for dynamically added element.

Upvotes: 0

adeneo
adeneo

Reputation: 318312

var W = $('#search').width();

$(document).on({
    click: function(){
        if ($(this).width()==W) {
            $(this).animate({width: '+=60px'},300);
        }
    },
    blur: function(){
        if($(this).val() == '' && $(this).width()>W) {
            $(this).animate({width:'-=60px'},300);
        }
    }
}, '#search');​

FIDDLE

A better idea would be to just replace click with focus, and an even better idea would be to set a width on the searchbox, and animate an actual value instead of adding width to an existing value.

Something like:

$(document).on('focus blur', '#search', function(){
    $(this).animate({width: $(this).width()==200 ? 100 : 200},300);
});

Another FIDDLE

Upvotes: 3

iambriansreed
iambriansreed

Reputation: 22261

Here:

$('#search').live('focus',function(){

    $(this).animate({width:($(this).width()+60)+'px'},300);

}).live('blur',function(){

    if($(this).val() == '')
        $(this).animate({width:($(this).width()-60)+'px'},300);

});

Future proof it by changing .live to .on.

http://jsfiddle.net/iambriansreed/7V93H/11/ ​

Upvotes: 2

BluesRockAddict
BluesRockAddict

Reputation: 15683

Here is one way to do it:

var extended = false;

$('#search').live('click',function(){
    if (!extended)
    {
       $(this).animate({width:'+=60px'},300);
       extended = true;
    }
}).live('blur',function(){

    if($(this).val() == '') {
        $(this).animate({width:'-=60px'},300);
        extended = false;
    }
});
​

Upvotes: 1

Related Questions