Products
Services
Contact Us

Scripts: DHTML :: Expand and Contract Effects :: Library Article #7

Developer's Section

Expanding and Contracting Input Boxes with JQuery
By: Erobo Team Member

Hire a Developer for Related Work / Installation | $55 hr
Rating:  | Rate It:   
Average Votes: (3143)
Favorites:

Learn a simple technique to expand and contract input boxes with JQuery.

You can create a simple expand and contract effect by using the animate function from the JQuery Library.

Example:



The code is shown below:

 Code Snippet 1

<script type='text/javascript' src='https://www.erobo.net/scripts/dhtml/7/scripts/jquery.min.js'></script> 


<script language="javascript">

$(function () {
  $("#srch_text").focus(function () {
    $(this).animate({            
      width: '180px',
      height: '13px'
     },
     "slow"
      )
   });

   $("#srch_text").blur(function () {
     $(this).delay(1000);
       if($(this).val() == ""){

         $(this).animate({            
           width: '130px',
           height: '13px'
         },
         "slow"
         );
         $(this).val("Search");
         }
    });

})

</script>

<input type="text" value="Search" id="srch_text" name="thisSearch"
 style="height:13px;width:130px;"; 
onclick="if(this.value == 'Search'){this.value='';}"/>




See other Scripts in Expand and Contract Effects

Submit Your Scripts:

If you would like to have your DHTML scripts published in this section please fill out
the form below:
*Your Name or Username:
Home Town:
*Email:
*Description and Code:
*Enter Code shown
to the right:

[ Refresh Image ]