Book Image

MooTools 1.2 Beginner's Guide

Book Image

MooTools 1.2 Beginner's Guide

Overview of this book

MooTools is a simple-to-use JavaScript library, ideal for people with basic JavaScript skills who want to elevate their web applications to a superior level. If you're a newcomer to MooTools looking to build dynamic, rich, and user-interactive web site applications this beginner's guide with its easy-to-follow step-by-step instructions is all you need to rapidly get to grips with MooTools.
Table of Contents (14 chapters)
MooTools 1.2 Beginner's Guide
Credits
About the Authors
About the Reviewer
Preface

Time for action— indicating blank form fields that are required


Let's see what the highlight method can do for us. We're going to use it on a web form.

  1. First we'll set up the form's HTML.

    <form action="" method="">
    <p>
    <label for="firstName">First Name:</label> <input name="firstName" type="text" />
    </p>
    <p>
    <label for="lastName">Last Name:</label> <input name="lastName" type="text" />
    </p>
    <p>
    <label for="email">Email:</label> <input name="email" type="text" />
    </p>
    </form>
    
  2. Then we target all the input elements and add a focus event listener to them. When an input field is focused on, we grab its parent (p) element and then run the highlight method on that element to animate its background color.

    $$('input').addEvent('focus', function(){
    this.getParent('p').highlight();
    });
    
  3. Let's see what happens when we pass one color value to the method as an argument. This effectively functions as the...