In the previous tutorial we've learned how to create an Input tag placeholder for those browsers that do not support the new placeholder attribute introduced in HTML5. In this tutorial we will learn how to expand the input tag when focus event occurs and resize it back to its initial width on blur . We will start by creating a new file called index.html and inside of this file a structure of our page together with the form and input tag: <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8" /> <title>Expanding input tag</title> <meta name="description" content="Expanding input tag" /> <meta name="keywords" content="Expanding input tag" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <section id="wrapper"> <form action="" method="post" id="search_form"> <label for="search">Search for: </label> <input type="text" name="search" id="search" placeholder="Search..." value="" /> </form> </section> </body> </html> Now create a new folder called css and the file inside of it called core.css . Open the new file in the editor and type the following css definitions to style our page and form elements: * { margin: 0; padding: 0; border: none; outline: none; text-decoration: none; } body { font-family: Arial Verdana Sans-serif; font-size: 14px; line-height: 21px; text-align: center; padding: 30px 0; background:#222; } #wrapper { width: 800px; text-align: left; margin: 0 auto; } #search_form { background:#d23286; float:right; padding:10px; } #search_form#search { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } #search_form label#search { float: left; } #search_form label { color:#fff; padding-right:10px; } #search { width:80px; padding:5px; opacity: 0.6; } .wide { width:180px; } You can now save and close the core.css file. Create another folder called js and inside of this folder file called core.js . Download the latest minified version of jQuery from jQuery website and place the downloaded file inside of our js directory. In index.html after the line that reads: <meta name="keywords" content="Expanding input tag" /> Type the following in order to include the earlier created css file: <link href="/css/core.css" rel="stylesheet" type="text/css" /> Before the closing body tag include two javascript files replacing the version of jQuery where relevant: <script src="/js/jquery-1.6.2.min.js" type="text/javascript"></script> <script src="/js/core.js" type="text/javascript"></script> The content of our index.html file should now look similar to this: <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8" /> <title>Expanding input tag</title> <meta name="description" content="Expanding input tag" /> <meta name="keywords" content="Expanding input tag" /> <link href="/css/core.css" rel="stylesheet" type="text/css" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <section id="wrapper"> <form action="" method="post" id="search_form"> <label for="search">Search for: </label> <input type="text" name="search" id="search" placeholder="Search..." value="" /> </form> </section> <script src="/js/jquery-1.6.2.min.js" type="text/javascript"></script> <script src="/js/core.js" type="text/javascript"></script> </body> </html> We are now ready to apply the expanding effect to our input tag. Open core.js file and start with creating the new object: var inputObject = { } The first and only property of this object will be called widthHoverPlus and its value will indicate how many pixels should our input tag expand by. After the opening curly bracket type: widthHoverPlus : 100 Next we will create a method responsible for expanding the input tag. On the next line type: goLarge : function(obj) { if (!obj.hasClass('wide')) { obj.animate({ 'width' : (obj.width() + parseInt(this.widthHoverPlus 10)) + 'px' } 'fast'); } } This new method takes one parameter which is the instance of the object on which the event has been executed. We first check if our object has a class wide applied to it and if not then we expand its width by using jQuery's animate() method where we add the value assigned to the widthHoverPlus property to the current width of the input tag. Next method restores the original width and removes or adds the class wide to our input tag depending on whether its value is blank or not: goSmall : function(obj) { if (obj.val() = '') { obj.animate({ 'width' : (obj.width() - parseInt(this.widthHoverPlus 10)) + 'px' } 'fast'); if (obj.hasClass('wide')) { obj.removeClass('wide'); } } else { if (!obj.hasClass('wide')) { obj.addClass('wide'); } } } Our object is now finished. After the last curly bracket type: $(function() { $('#search').focus(function() { inputObject.goLarge($(this)); }); $('#search').blur(function() { inputObject.goSmall($(this)); }); }) These two statements encapsulated within the document ready definition execute the relevant method when the right event is triggered. Our entire core.js file should now have the following content: var inputObject = { widthHoverPlus : 100 goLarge : function(obj) { if (!obj.hasClass('wide')) { obj.animate({ 'width' : (obj.width() + parseInt(this.widthHoverPlus 10)) + 'px' } 'fast'); } } goSmall : function(obj) { if (obj.val() = '') { obj.animate({ 'width' : (obj.width() - parseInt(this.widthHoverPlus 10)) + 'px' } 'fast'); if (obj.hasClass('wide')) { obj.removeClass('wide'); } } else { if (!obj.hasClass('wide')) { obj.addClass('wide'); } } } } $(function() { $('#search').focus(function() { inputObject.goLarge($(this)); }); $('#search').blur(function() { inputObject.goSmall($(this)); }); }) And that's it in this tutorial - any questions / suggestions - use our comments section. Add a comment Name: * Email: * Website: Twitter: Comment (no html allowed): * Add Comment
Explore the rise of digital parenting, its benefits and challenges in the modern world. Understand how parents can effectively guide their children th
Explore Hampshire College's Alternative Curriculum—breaking free from tradition, offering personalised education, interdisciplinary concentrations,
In this article, we’ll highlight responsibilities, career pathways and wage benchmarks for a career in Sport Coaching.
Discover the invaluable role of study abroad advisors in navigating the complex journey of international education. From personalised guidance and app
NEED HELP?
2K Views
Report Spam
9 Answers
