CODEWITHSUNDEEP
javascripthtmltwitter-bootstrapcss-transitions
Akhilesh Singh
Akhilesh Singh

Reputation: 1724

On mouse enter input field Expand

I want to expand my input field when i enter my mouse to fill the entry or collapse its original width when i remove my mouse.

My Html Code

<div class="col-xs-4">
<input type="text" class="form-control" placeholder="All India" >
</div>
<div class="col-xs-6">
<input type="text"  id="service" class="form-control" placeholder="What Service Do You Need Today ?">
</div>

Script

$('#service').click(function() {
         $('#service').css({
         'width': '134%'
         });
});

JsFiddle

Upvotes: 2

Views: 769

Answers (6)

Andrii Iushchuk
Andrii Iushchuk

Reputation: 376

Try this one:

$('#service')
  .on('focusin',function() {
    $(this).width('134%');
  })
  .on('focusout',function() {
     $(this).width('100%');
  });

Upvotes: 2

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Hi now you can try to focus and blur 

$( "#service" ).focus(function() {
  $('#service').css({ 'width': '134%' });
});

$( "#service" ).blur(function() {
  $('#service').css({ 'width': '100%' });
});

Demo

Upvotes: 2

NooBskie
NooBskie

Reputation: 3841

Codepen http://codepen.io/noobskie/pen/pjEdqv

Your looking for the hover function right?

$( "#service" ).hover(
  function() {
    $( this ).css({'width': '134%'});
  }, function() {
    $( this ).css({'width': '100%'});
  }
);

Edit

Updated codepen click expands the input to 134% on mouseleave event returns back to normal

$( "#service" ).click(
  function() {
    $( this ).css({'width': '134%'});
  }
);
$( "#service" ).mouseout(function() {
    $( this ).css({'width': '100%'});
});

Upvotes: 2

krishna
krishna

Reputation: 152

Either use

$('#service').on('blur',function() { 

         $('#service').css({
         'width': '100%'
         });

    });

or

$('#service').on('mouseleave',function() {

         $('#service').css({
         'width': '100%'
         });

    });

Upvotes: 0

craigo
craigo

Reputation: 151

You can use JQuery's 'Focus' method:

$('#service').on('focus',function() {
    $('#service').css({'width': '134%'});
});

Hope this helps.

To Resize on focus in and then focus out:

$('#service').on('focusin',function() {
    $('#service').css({'width': '134%'});
});
$('#service').on('focusout',function() {
     $('#service').css({'width': ''});
});

Upvotes: 3

Ivin Raj
Ivin Raj

Reputation: 3429

you can try this one:

$('#service').click(function() {
             $('#service').css({
             'width': '134%'
             });
     return:false;

        });

DEMO

Upvotes: 2

Related Questions