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: (1740)
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='http://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:


System Message:
  • Your DHTML script has been sent. Please allow 48 hours for processing.


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 ]