O'Reilly logo

MooTools 1.3 Cookbook by Jay Larry G. Johnston

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Saving space on our site: expand text containers on focus

Continuing in our effort to save space, we will endeavor to expand text containers on focus.

Getting ready

Prepare our DOM for this recipe where each text field greets the focus from the user by expanding smoothly, create regular INPUT elements. The code snippet in the book also includes a TEXTAREA. Also define two states of CSS to represent both blurred and focused elements.

... <tr> <td align="right"><label for="name">Your Name</label></td> <td><input type="text" value="" name="name" id="name"></td> </tr> <tr> <td align="right"> <label for="email">Your Email Address</label> </td> <td> <input type="text" value="" name="email" id="email"> </td> </tr> ... <style type="text/css"> .blurred_element ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required