Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying MooTools 1.2 Beginner's Guide
  • Table Of Contents Toc
MooTools 1.2 Beginner's Guide

MooTools 1.2 Beginner's Guide

4.3 (9)
Buy this Book
close
close
MooTools 1.2 Beginner's Guide

MooTools 1.2 Beginner's Guide

4.3 (9)
Buy this Book

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)
close
close
close
MooTools 1.2 Beginner's Guide
Icon
MooTools 1.2 Beginner's Guide
Credits
Icon
Credits
About the Authors
Icon
About the Authors
About the Reviewer
Icon
About the Reviewer
Preface
Icon
Preface
Lock Free Chapter
1
MooTools and Me
Icon
MooTools and Me
Icon
What is MooTools?
Icon
Why use MooTools?
Icon
Downloading and installing MooTools
Icon
Time for action—downloading and installing the MooTools Core
Icon
Rolling your own MooTools
Icon
Time for action—exploring the MooTools Core Builder
Icon
Time for action—exploring the MooTools More Builder
Icon
The API concept
Icon
MooTools resources
Icon
Summary
2
Writing JavaScript with MooTools
Icon
Writing JavaScript with MooTools
Icon
Writing unobtrusive JavaScript with MooTools
Icon
Time for action—rewriting our script unobtrusively
Icon
Creating MooTools classes
Icon
Time for action—creating an instance of Dog
Icon
Time for action—giving our class instance some custom options
Icon
Time for action—determining the value of our options
Icon
Time for action—extending the ShowDog class with the Dog class
Icon
Using MooTools classes
Icon
Time for action—create a chain of Fx.Tween methods
Icon
Summary
3
Selecting DOM Elements
chevron up
Icon
Selecting DOM Elements
Icon
MooTools and CSS selectors
Icon
Working with the $() and $$() functions
Icon
Time for action—selecting an element with the dollar function
Icon
Time for action—selecting elements with the dollars function
Icon
Time for action—selecting multiple sets of elements with the dollars function
Icon
Selection using pseudo-classes
Icon
Time for action—using pseudo-classes to zebra stripe a table
Icon
Working with attribute selectors
Icon
Time for action—using = attribute selector
4
The Core's Useful Utility Functions
Icon
The Core's Useful Utility Functions
Icon
What is the Core?
Icon
Browser: Getting information about the client
Icon
Time for action—determining the client's rendering engine and version
Icon
Time for action—using Browser.Platform to customize SuperSoftware's download page
Icon
Exploring the Core utility functions
Icon
Time for action—the $time() function
Icon
Time for action—exploring the $clear() function with periodical()
Icon
Time for action—exploring the $each function
Icon
Summary
5
Working with Events
Icon
Working with Events
Icon
What are events exactly?
Icon
Adding event listeners
Icon
Time for action—highlighting focused fields of web forms
Icon
Time for action—adding tooltips to the web form
Icon
Creating custom events
Icon
Time for action—creating a custom event for showing help tips
Icon
Removing, cloning, and firing off events
Icon
Time for action—removing an event
Icon
Time for action—firing off a click event
Icon
The MooTools event object
Icon
Time for action—preventing the default behavior of a hyperlink
Icon
Time for action—preventing event bubbling
Icon
Summary
6
Bringing Web Pages to Life with Animation
Icon
Bringing Web Pages to Life with Animation
Icon
MooTools' Fx class
Icon
Animating a CSS property with Fx.Tween
Icon
Time for action— creating a hide/show FAQ page
Icon
Time for action—toggling the visibility of a div
Icon
Time for action— fading an image in and out
Icon
Time for action— indicating blank form fields that are required
Icon
Animating multiple CSS properties with Fx.Morph
Icon
Time for action— enlarging an image
Icon
Time for action— experimenting with morph
Icon
Other Fx methods
Icon
Summary
7
Going 2.0 with Ajax
Icon
Going 2.0 with Ajax
Icon
What you'll need
Icon
Creating a Request object
Icon
Requesting data
Icon
Time for action—requesting remote data
Icon
Time for action—updating a web page with HTML
Icon
Time for action—loading HTML data
Icon
Time for action—working with Ajax and JSON
Icon
Sending data
Icon
Time for action—sending data to PHP
Icon
Setting and getting HTTP headers
Icon
Time for action—getting the Last-Modified HTTP header
Icon
Summary
8
Beefing Up MooTools: Using the MooTools More Plugins
Icon
Beefing Up MooTools: Using the MooTools More Plugins
Icon
Downloading MooTools More plugins
Icon
Time for action—downloading the Fx.Accordion plugin
Icon
Installing MooTools plugins
Icon
Time for action—installing Fx.Accordion
Icon
Discovering a handful of MooTools More plugins
Icon
Time for action—creating an accordion
Icon
Time for action—downloading more Mootools More plugins
Icon
Time for action—building a Date calculator tool
Icon
Time for action—creating a web form that uses OverText
Icon
Time for action—creating a simple drag-and-drop game
Icon
Summary
9
Creating Your Own Plugin
Icon
Creating Your Own Plugin
Icon
Why create a plugin?
Icon
Designing the plugin
Icon
Time for action—creating a design sheet for our plugin
Icon
Creating the ImageCaption script
Icon
Time for action—writing the ImageCaption script
Icon
Converting the script to a flexible plugin
Icon
Time for action—creating the ImageCaption plugin
Icon
Instantiating the plugin
Icon
Time for action—basic instantiation of the ImageCaption plugin
Icon
Time for action—creating new instances of the plugin
Icon
Time for action—multiple instances of the ImageCaption plugin
Icon
Preparing your plugin for the public
Icon
Time for action—documenting the ImageCaption plugin
Icon
Time for action—creating a basic download page for the ImageCaption plugin
Icon
Summary

Chapter 3. Selecting DOM Elements

In the last chapter, we learned about the MooTools syntax as well as JavaScript best practices. More specifically, we discussed unobtrusive JavaScript and how we should separate our structure (HTML) from our website's behaviors (JavaScript).

In order to successfully and effortlessly write unobtrusive JavaScript, we must have a way to point to the Document Object Model ( DOM) elements that we want to manipulate. The DOM is a representation of objects in our HTML and a way to access and manipulate them. In traditional JavaScript, this involves a lot (like, seriously a lot) of code authoring, and in many instances, a lot of head-banging-against-wall-and-pulling-out-hair as you discover a browser quirk that you must solve.

Let me save you some bumps, bruises, and hair by showing you how to select DOM elements the MooTools way. This chapter will cover how you can utilize MooTools to select/match simple elements (like, "All div elements") up to the most complex...

Visually different images
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
MooTools 1.2 Beginner's Guide
End of Section 3
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon