In this lesson you are going to see how to expand search box (text box) on focus using jQuery.
We are going to use three jQuery functions to achieve this effect:
1. focus()
2. blur()
3. animate()
Basically all of us think, we have to write this expand animation in an onClick event, even my title is saying onClick, but that is not correct. onClick event works only on mouse click instead if you use focus, it works for both mouse and keyboard (using tab key) etc.,
So let’s see the coding:
|
1 2 3 4 5 6 7 8 9 |
<script> $(function(){ $('#searchbox').focus(function(){ $(this).animate({width: '150px'}, 300) }).blur(function(){ $(this).animate({width: '100px'}, 300) }); }); </script> |
#searchbox is the id of the text box i used.
The basic idea is when the cursor comes (focus) into the text box increase the width of the text box to 150px with a slow animation effect and when the cursor goes (blur) out of the box decrease the size to 100px with the same animation effect.
Here is the entire code so you can play around with it,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <style> #searchbox{ width: 100px; } </style> <script> $(function(){ $('#searchbox').focus(function(){ $(this).animate({width: '150px'}, 300) }).blur(function(){ $(this).animate({width: '100px'}, 300) }); }); </script> </head> <body> <form action="http://www.tutorialsmade.com/" method="get"> <h3>Search Tutorialsmade.com</h3> <input type="text" id="searchbox" name="s" placeholder="Search" /> </form> </body> </html> |
And here is the demo,
