MooTools 1.3 Cookbook电子书

MooTools 1.3 Cookbook

Table of Contents

MooTools 1.3 Cookbook

Credits

About the Author

About the Reviewer

www.PacktPub.com

Support files, eBooks, discount offers and more

Why subscribe?

Free access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Oldies-but-Goodies: Foundational Moo

MooTroduction

See also

Knowing our MooTools version

Getting ready

How to do it...

How it works...

There's more...

See also

Finding MooTools documentation both new and old

Using Google Library's MooTools scripts

Getting ready

How to do it...

How it works...

There's more...

Injecting Hello World into an HTML DIV

Getting ready

How to do it...

How it works...

There's more...

See also

Storing a list of names in an array of values

Getting ready

How to do it...

How it works...

There's more

Looping over an array of names and saying "Hello" to all of them

Getting ready

How to do it...

How it works...

See also

Doing more with a list of names by creating an object

Getting ready

How to do it...

How it works...

There's more...

Creating a pop-up alert upon clicking a DIV

Getting ready

How to do it...

How it works...

There's more...

Adding multiple event listeners to an HTML element

Getting ready

How to do it...

How it works...

There's more...

Dragging an HTML element

Getting ready

How to do it...

How it works...

There's more...

See also

Understanding MooTools ubiquitous anonymous functions

Getting ready

How to do it...

How it works...

There's more...

Making an Ajax call

Getting ready

How to do it...

How it works...

There's more...

See also

2. Switching Paddles Midstream: Changing HTML After Page Load

Finding an element by its ID attribute

How to do it...

How it works...

There's more...

Finding a group of elements by their class attribute

Getting ready

How to do it...

How it works...

There's more...

Moving an element with a particular ID

How to do it...

How it works...

There's more...

Moving a group of elements using their HTML tag

Getting ready

How to do it...

How it works...

See also

Removing an element by ID

Getting ready

How to do it...

How it works...

There's more...

See also

Removing a group of elements using CSS selectors

Getting ready

How to do it...

How it works...

There's more...

Adding an element with a unique ID

Getting ready

How to do it...

How it works...

There's more...

Adding a group of elements with incremented IDs

Getting ready

How to do it...

How it works...

There's more...

See also

Styling the text within an element

Getting ready

How to do it...

How it works...

There's more...

Styling the borders of a group of elements

Getting ready

How to do it...

How it works...

Creating a time clock that updates per second

Getting ready

How to do it...

How it works...

There's more...

See also

Creating a welcome message based on a JavaScript cookie

How to do it...

How it works...

3. And on the 8th Day: Creating HTML Elements

Creating a DIV with a border on it

How to do it...

How it works...

There's more...

Creating an "A" tag link with linked text

Getting ready

How to do it...

How it works...

There's more...

See also

Creating an IFRAME that displays google.com

Getting ready

How to do it...

How it works...

There's more...

Injecting a "TD" data cell into a "TR" table row

How to do it...

How it works...

There's more...

See also

Injecting a "TR" data row into a "Table"

How to do it...

How it works...

There's more...

Injecting a table into the HTML DOM

How to do it...

How it works...

There's more...

Creating an "A" tag link that alters the src of an IFRAME

How to do it...

How it works...

There's more...

See also

Creating a DIV displaying an Ajax form response

How to do it...

How it works...

There's more...

Creating new form elements

How to do it...

How it works...

There's more...

Creating new form elements when more inputs are needed

Getting ready

How to do it...

How it works...

There's more...

See also

Adding a select box to the HTML DOM

Getting ready

How to do it...

How it works...

There's more...

Adding a select option using Ajax

Getting ready

How to do it...

How it works...

There's more...

See also

4. That's Not All Folks: Animation and Scrolling

Scrolling a news box automatically

Getting ready

How to do it...

How it works...

There's more...

See also

Showing a tall page slowly as visitors watch

How to do it...

How it works...

There's more...

See also

Making anchors scroll smoothly into view rather than jump instantly

Getting ready

How to do it...

How it works...

There's more...

Welcome visitors with a message that fades in for effect

Getting ready

How to do it...

How it works...

There's more...

See more

Removing an error message from the page with a fade effect

Getting ready

How to do it...

How it works...

There's more...

Welcoming visitors with a sliding message

How to do it...

How it works...

There's more...

See also

Creating an attention-grabber notification

Getting ready

How to do it...

There's more...

See also

Creating a scrolling thumbnail display

How to do it...

How it works...

There's more...

See also

Launching a lightbox image from a thumbnail

Getting ready

How to do it...

How it works...

See also...

Creating an application task ribbon that slides in

Getting ready

How to do it...

There's more...

See also

Making mouseover elements grow on a ribbon

Getting ready

How to do it...

How it works...

There's more...

See also

Making active elements on a ribbon bounce

Getting ready

How to do it...

How it works...

There's more...

5. Mr. Clean Uses Ajax: Remote Asynchronous Calls

Using Firefox's Firebug to troubleshoot asynchronous calls

Getting ready

How to do it...

How it works...

There's more...

See also

Displaying remote data via Ajax within a DIV

Getting ready

How to do it...

How it works...

There's more...

See also

Displaying cross domain remote data via Ajax within a DIV

Getting ready

How to do it...

How it works...

There's more...

See also

Screen scraping a portion of another web page

Getting ready

How to do it...

There's more...

See also

Parsing and displaying JSON data

How to do it...

How it works...

There's more...

See also

Parsing and displaying a web service

How to do it...

How it works...

See also

Submitting a form using Ajax

Getting ready

How to do it...

How it works...

There's more...

See also

Building a calculator using Ajax

How to do it...

There's more...

See also

Creating a scrolling stock ticker

Getting ready

How to do it...

How it works...

See also

Updating a scrolling ticker periodically

How to do it...

How it works...

There's more...

Listening to Mr. Clean's MP3 list!

Getting ready

How to do it...

See also

Querying Mr. Clean's MP3 list!

Getting ready

How to do it...

How it works...

There's more...

See also

6. Easy Come, Easy Go: Drag and Drop

Dragging product images around on the screen

How to do it...

How it works...

There's more...

See also

Making a shopping cart where products can be dropped

How to do it...

How it works...

There's more...

Changing onscreen inventory levels when a product is dropped on the cart

How to do it

How it works...

There's more...

Allowing products in a shopping cart to be "put back" on the shelf

How to do it...

How it works...

See also

Making Ajax calls when products are dropped or added to a shopping cart

How to do it...

How it works...

There's more...

Making a reset button to remove all products from a shopping cart

How to do it...

See also

Dragging window widgets around on a screen

Getting ready

How to do it...

How it works...

There's more...

Making window widgets push other widgets around on a screen

How to do it...

How it works...

See also

Making Ajax calls to record the location of window widgets

How to do it...

How it works...

See also

Making a reset button to put widgets back into a default state

How to do it...

How it works...

There's more...

See also

Creating a sortable list

Getting ready

How to do it...

How it works...

There's more...

Sending sorted list info via Ajax

How to do it...

7. Knock and the Door Will Open: Events and Listeners

Creating an event listener that "hello"s on click

Getting ready

How to do it...

How it works...

There's more...

See also

Removing a listener that responds to clicks

Getting ready

How to do it...

How it works...

There's more...

Creating a group of elements that add their NAMEs and VALUEs as text in a DIV

Getting ready

How to do it...

How it works...

There's more...

Responding to both CLICK and MOUSEOVER

Getting ready

How to do it...

How it works...

Removing one of multiple event listeners

Getting ready

How to do it...

How it works...

There's more...

See also

Adding another event listener to an element

Getting ready

How to do it...

How it works...

See also

Making one listener start a chain of events

Getting ready

How to do it...

How it works...

There's more...

See also

Removing a chain of events

Getting ready

How to do it...

How it works...

There's more...

Stopping a listener from executing a chain of events

Getting ready

How to do it...

How it works...

There's more...

See also

Making buttons rollover upon MOUSEOVER

Getting ready

How to do it...

How it works...

There's more

Changing graphics upon MOUSEOVER

Getting ready

How to do it...

How it works...

Using MooTools Fx in conjunction with onmouseover events

Getting ready

How to do it...

How it works...

See also

8. Dynamite! (Movin' On Up): Working with Transitions

Saving space on our site: expanding upon interaction

Getting ready

How to do it...

How it works...

There's more...

Saving space on our site: creating a transition that grows an IMG from small to large

Getting ready

How to do it...

How it works...

Saving space on our site: the "more" button that shows more with a transition

Getting ready

How to do it...

How it works...

There's more...

See also

Saving space on our site: expand text containers on focus

Getting ready

How to do it...

How it works...

Welcoming users in a flashy way: flying in text smoothly

Getting ready

How to do it...

How it works...

There's more...

See also

Welcoming users in a flashy way: stretchy elastic

Getting ready

How to do it...

How it works...

There's more...

See also

Making a little duck bounce when clicked

Getting ready

How to do it...

There's more...

See also

Showing a notification to a user that glows momentarily

Getting ready

How to do it...

How it works...

There's more...

See also

Making a golf ball ease up to a hole and stop

Getting ready

How to do it...

How it works...

There's more...

Making usability cool with fading font-size changer

Getting ready

How to do it...

How it works...

There's more...

Fading through a rotating group of images—slideshow!

Getting ready

How to do it...

There's more...

9. WTFudge is Going On?: Troubleshooting MooTools

Using Firefox's Firebug to see MooTool stuff in action

Getting ready

How to do it...

How it works...

There's more...

See also

Using IE's Developer Toolbar to see MooTool stuff in action

Getting ready

How to do it...

How it works...

There's more...

See also

Reporting the type of a variable

Getting ready

How to do it...

How it works...

There's more...

See also

Determining the browser version of a visitor

How to do it...

How it works...

There's more...

See also

Using Firebug to view the scripts included on a page

Getting ready

How to do it...

There's more

See also

Viewing the members of an ARRAY using three different methods

How to do it...

There's more...

See also

Viewing the members of an OBJECT using three different methods

Getting ready

How to do it...

How it works...

There's more...

See also

Using the console debugger in Firefox's Firebug

How to do it...

How it works...

There's more...

See also

Showing an alert if an Ajax call fails

How to do it...

How it works...

There's more...

10. Enough Is Never Enough: Extending MooTools

Making a Corvette out of a car—extending the base class

Getting ready

How to do it...

How it works...

There's more...

See also

Giving a Corvette a supercharger—Implements versus Extends

Getting ready

How to do it...

How it works...

Upgrading some Corvettes—Extends versus Implements

Getting ready

How to do it...

How it works...

There's more...

See also

Upgrading all Corvettes via recall—Implement AND Extend in unison!

Getting ready

How to do it...

How it works...

Sending a Corvette on a list of errands—extending a class with a chain

Getting ready

How to do it...

How it works...

There's more...

Extending elements—preventing multiple form submissions

How to do it...

How it works...

There's more...

See also

Extending elements—prompt for confirmation on submit

How to do it...

How it works...

There's more...

Extending typeOf, fixing undefined var testing

Getting ready

How to do it...

How it works...

There's more...

See also

Extending images—add captions based on ALT attributes

Getting ready

How to do it...

How it works...

There's more...

Extending images—lazy load

Getting ready

How to do it...

How it works...

There's more...

See also

Loading Google fonts!

Get ready

How to do it...

How it works...

There's more...

See also

Extending the Google Font Loader

How to do it...

How it works...

There's more

Index