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—creating a custom event for showing help tips


Imagine that you created a web application that supports keyboard shortcuts. Keyboard shortcuts allow users to use web applications more efficiently. For this example, let us say that one of your keyboard shortcuts is Shift + H, which displays a box with help tips in it.

  1. First step, let's set up the HTML for our help tip box. Our help tip box will be a<div> with an ID of help.

    <body>
    <h1>myWebApp</h1>
    <p>Use <strong> Shift +  H</strong> to view Help tips on how to use this web application.</p>
    <div id="help">
    <h1>Help Tips</h1>
    <p>This is the help tip box. It will display helpful tips on how to use this web application.</p>
    <p>Press <strong> Shift +  H</strong> on the keyboard to toggle this box.</p>
    </div>
    </body>
    
  2. Let's give the help tip box some styles, as well as change the default font style of the HTML web page...