You are previewing MooTools 1.3 Cookbook.
O'Reilly logo
MooTools 1.3 Cookbook

Book Description

Over 110 highly effective recipes to turbo-charge the user interface of any web-enabled Internet application and web page

  • Code snippets that work directly out of the box on all major web browsers

  • Master smooth animations without complex code nor the need for advanced JavaScript knowledge

  • An ideal accompaniment to any tutorial, this book provides instant answers to common problems

In Detail

MooTools is a JavaScript framework that abstracts the JavaScript language. JavaScript itself, complex in syntax, provides the tools to write a layer of content interaction for each different browser. MooTools abstracts those individual, browser-specific layers to allow cross-browser scripting in an easy-to-read and easy-to-remember syntax.

Animation and interaction, once the domain of Flash, are being taken by storm by the MooTools JavaScript framework, which can cause size, shape, color, and opacity to transition smoothly. Discover how to use AJAX to bring data to today's web page users who demand interactivity without clunky page refreshes. When searching for animation and interactivity solutions that work, MooTools 1.3 Cookbook has individual, reusable code examples that get you running fast!

MooTools 1.3 Cookbook readies programmers to animate, perform AJAX, and attach event listeners in a simple format where each section provides a clear and cross-browser compatible sketch of how to solve a problem, whether reading from beginning to finish or browsing directly to a particular recipe solution.

MooTools 1.3 Cookbook provides instant solutions to MooTools problems - whatever you want to do with MooTools, this book will tell you how to do it.

MooTools 1.3 Cookbook is presented in a progressive order that builds concepts and ideas, while simultaneously being a collection of powerful individual, standalone, recipe solutions.

Table of Contents

  1. MooTools 1.3 Cookbook
    1. MooTools 1.3 Cookbook
    2. Credits
    3. About the Author
    4. About the Reviewer
    5. www.PacktPub.com
      1. Support files, eBooks, discount offers and more
        1. Why subscribe?
        2. Free access for Packt account holders
    6. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    7. 1. Oldies-but-Goodies: Foundational Moo
      1. MooTroduction
        1. See also
      2. Knowing our MooTools version
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      3. Finding MooTools documentation both new and old
      4. Using Google Library's MooTools scripts
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      5. Injecting Hello World into an HTML DIV
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      6. Storing a list of names in an array of values
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more
      7. Looping over an array of names and saying "Hello" to all of them
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. See also
      8. Doing more with a list of names by creating an object
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      9. Creating a pop-up alert upon clicking a DIV
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      10. Adding multiple event listeners to an HTML element
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      11. Dragging an HTML element
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      12. Understanding MooTools ubiquitous anonymous functions
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      13. Making an Ajax call
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
    8. 2. Switching Paddles Midstream: Changing HTML After Page Load
      1. Finding an element by its ID attribute
        1. How to do it...
        2. How it works...
        3. There's more...
      2. Finding a group of elements by their class attribute
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      3. Moving an element with a particular ID
        1. How to do it...
        2. How it works...
        3. There's more...
      4. Moving a group of elements using their HTML tag
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. See also
      5. Removing an element by ID
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      6. Removing a group of elements using CSS selectors
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      7. Adding an element with a unique ID
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      8. Adding a group of elements with incremented IDs
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      9. Styling the text within an element
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      10. Styling the borders of a group of elements
        1. Getting ready
        2. How to do it...
        3. How it works...
      11. Creating a time clock that updates per second
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      12. Creating a welcome message based on a JavaScript cookie
        1. How to do it...
        2. How it works...
    9. 3. And on the 8th Day: Creating HTML Elements
      1. Creating a DIV with a border on it
        1. How to do it...
        2. How it works...
        3. There's more...
      2. Creating an "A" tag link with linked text
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      3. Creating an IFRAME that displays google.com
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      4. Injecting a "TD" data cell into a "TR" table row
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also
      5. Injecting a "TR" data row into a "Table"
        1. How to do it...
        2. How it works...
        3. There's more...
      6. Injecting a table into the HTML DOM
        1. How to do it...
        2. How it works...
        3. There's more...
      7. Creating an "A" tag link that alters the src of an IFRAME
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also
      8. Creating a DIV displaying an Ajax form response
        1. How to do it...
        2. How it works...
        3. There's more...
      9. Creating new form elements
        1. How to do it...
        2. How it works...
        3. There's more...
      10. Creating new form elements when more inputs are needed
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      11. Adding a select box to the HTML DOM
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      12. Adding a select option using Ajax
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
    10. 4. That's Not All Folks: Animation and Scrolling
      1. Scrolling a news box automatically
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      2. Showing a tall page slowly as visitors watch
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also
      3. Making anchors scroll smoothly into view rather than jump instantly
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      4. Welcome visitors with a message that fades in for effect
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See more
      5. Removing an error message from the page with a fade effect
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      6. Welcoming visitors with a sliding message
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also
      7. Creating an attention-grabber notification
        1. Getting ready
        2. How to do it...
        3. There's more...
        4. See also
      8. Creating a scrolling thumbnail display
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also
      9. Launching a lightbox image from a thumbnail
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. See also...
      10. Creating an application task ribbon that slides in
        1. Getting ready
        2. How to do it...
        3. There's more...
        4. See also
      11. Making mouseover elements grow on a ribbon
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      12. Making active elements on a ribbon bounce
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
    11. 5. Mr. Clean Uses Ajax: Remote Asynchronous Calls
      1. Using Firefox's Firebug to troubleshoot asynchronous calls
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      2. Displaying remote data via Ajax within a DIV
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      3. Displaying cross domain remote data via Ajax within a DIV
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      4. Screen scraping a portion of another web page
        1. Getting ready
        2. How to do it...
        3. There's more...
        4. See also
      5. Parsing and displaying JSON data
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also
      6. Parsing and displaying a web service
        1. How to do it...
        2. How it works...
        3. See also
      7. Submitting a form using Ajax
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      8. Building a calculator using Ajax
        1. How to do it...
        2. There's more...
        3. See also
      9. Creating a scrolling stock ticker
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. See also
      10. Updating a scrolling ticker periodically
        1. How to do it...
        2. How it works...
        3. There's more...
      11. Listening to Mr. Clean's MP3 list!
        1. Getting ready
        2. How to do it...
        3. See also
      12. Querying Mr. Clean's MP3 list!
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
    12. 6. Easy Come, Easy Go: Drag and Drop
      1. Dragging product images around on the screen
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also
      2. Making a shopping cart where products can be dropped
        1. How to do it...
        2. How it works...
        3. There's more...
      3. Changing onscreen inventory levels when a product is dropped on the cart
        1. How to do it
        2. How it works...
        3. There's more...
      4. Allowing products in a shopping cart to be "put back" on the shelf
        1. How to do it...
        2. How it works...
        3. See also
      5. Making Ajax calls when products are dropped or added to a shopping cart
        1. How to do it...
        2. How it works...
        3. There's more...
      6. Making a reset button to remove all products from a shopping cart
        1. How to do it...
          1. See also
      7. Dragging window widgets around on a screen
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      8. Making window widgets push other widgets around on a screen
        1. How to do it...
        2. How it works...
        3. See also
      9. Making Ajax calls to record the location of window widgets
        1. How to do it...
        2. How it works...
        3. See also
      10. Making a reset button to put widgets back into a default state
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also
      11. Creating a sortable list
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      12. Sending sorted list info via Ajax
        1. How to do it...
    13. 7. Knock and the Door Will Open: Events and Listeners
      1. Creating an event listener that "hello"s on click
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      2. Removing a listener that responds to clicks
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      3. Creating a group of elements that add their NAMEs and VALUEs as text in a DIV
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      4. Responding to both CLICK and MOUSEOVER
        1. Getting ready
        2. How to do it...
        3. How it works...
      5. Removing one of multiple event listeners
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      6. Adding another event listener to an element
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. See also
      7. Making one listener start a chain of events
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      8. Removing a chain of events
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      9. Stopping a listener from executing a chain of events
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      10. Making buttons rollover upon MOUSEOVER
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more
      11. Changing graphics upon MOUSEOVER
        1. Getting ready
        2. How to do it...
        3. How it works...
      12. Using MooTools Fx in conjunction with onmouseover events
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. See also
    14. 8. Dynamite! (Movin' On Up): Working with Transitions
      1. Saving space on our site: expanding upon interaction
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      2. Saving space on our site: creating a transition that grows an IMG from small to large
        1. Getting ready
        2. How to do it...
        3. How it works...
      3. Saving space on our site: the "more" button that shows more with a transition
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      4. Saving space on our site: expand text containers on focus
        1. Getting ready
        2. How to do it...
        3. How it works...
      5. Welcoming users in a flashy way: flying in text smoothly
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      6. Welcoming users in a flashy way: stretchy elastic
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      7. Making a little duck bounce when clicked
        1. Getting ready
        2. How to do it...
        3. There's more...
        4. See also
      8. Showing a notification to a user that glows momentarily
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      9. Making a golf ball ease up to a hole and stop
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      10. Making usability cool with fading font-size changer
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      11. Fading through a rotating group of images—slideshow!
        1. Getting ready
        2. How to do it...
        3. There's more...
    15. 9. WTFudge is Going On?: Troubleshooting MooTools
      1. Using Firefox's Firebug to see MooTool stuff in action
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      2. Using IE's Developer Toolbar to see MooTool stuff in action
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      3. Reporting the type of a variable
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      4. Determining the browser version of a visitor
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also
      5. Using Firebug to view the scripts included on a page
        1. Getting ready
        2. How to do it...
        3. There's more
        4. See also
      6. Viewing the members of an ARRAY using three different methods
        1. How to do it...
        2. There's more...
        3. See also
      7. Viewing the members of an OBJECT using three different methods
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      8. Using the console debugger in Firefox's Firebug
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also
      9. Showing an alert if an Ajax call fails
        1. How to do it...
        2. How it works...
        3. There's more...
    16. 10. Enough Is Never Enough: Extending MooTools
      1. Making a Corvette out of a car—extending the base class
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      2. Giving a Corvette a supercharger—Implements versus Extends
        1. Getting ready
        2. How to do it...
        3. How it works...
      3. Upgrading some Corvettes—Extends versus Implements
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      4. Upgrading all Corvettes via recall—Implement AND Extend in unison!
        1. Getting ready
        2. How to do it...
        3. How it works...
      5. Sending a Corvette on a list of errands—extending a class with a chain
        1. Getting ready
        2. How to do it...
          1. How it works...
          2. There's more...
      6. Extending elements—preventing multiple form submissions
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also
      7. Extending elements—prompt for confirmation on submit
        1. How to do it...
        2. How it works...
        3. There's more...
      8. Extending typeOf, fixing undefined var testing
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      9. Extending images—add captions based on ALT attributes
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      10. Extending images—lazy load
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      11. Loading Google fonts!
        1. Get ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      12. Extending the Google Font Loader
        1. How to do it...
        2. How it works...
        3. There's more