Skip to content

Instantly share code, notes, and snippets.

@digitup

digitup/jQuery: Extend search box width.html

Created October 12, 2012 09:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save digitup/3878397 to your computer and use it in GitHub Desktop.
Save digitup/3878397 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery: Extend search box width
Raw
jQuery: Extend search box width.html
<html><body>
<style>
#search {
background-color: #999;
width: 100px;
border: 1px solid #ddd;
outline: none;
}
</style>
<input id="search" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
<script>
jQuery(function() {
jQuery('#search').focus(function() {
jQuery(this).animate({ width: '200px', backgroundColor: '#fff' });
}).blur(function() {
jQuery(this).animate({ width: '100px', backgroundColor: '#999' });
});
});
</script>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment