MooTools 1.3 Cookbook

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

MooTools 1.3 Cookbook

Cookbook
Jay Larry G. Johnston

Over 110 highly effective recipes to turbo-charge the user interface of any web-enabled Internet application and web page
$26.99
$44.99
RRP $26.99
RRP $44.99
eBook
Print + eBook
$12.99 p/month

Get Access

Get Unlimited Access to every Packt eBook and Video course

Enjoy full and instant access to over 3000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.

Book Details

ISBN 139781849515689
Paperback276 pages

About This Book

  • 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

Who This Book Is For

Users of all skill levels will find this book useful. Advanced users will expand their knowledge of MooTools interaction, intermediate users will delve into new concepts of usage. Novice users will find they are carefully taken through each facet of knowledge necessary to rapidly become intermediate users.

Table of Contents

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

What You Will Learn

  • Change HTML with working examples of finding, moving, adding, and removing elements and groups of elements
  • Create HTML elements like iframes, a tags, and form elements and inject them into tables, table rows, and div elements
  • Animate the Internet with morphs, tweens, slides, and scrolls
  • Make thumbnails scroll and your users drool!
  • Fire remote AJAX calls, on page, bringing them into the Web 2.0 arena where user interfaces are cool and fun
  • Find plugins on the Web that extend MooTools and make the most of everything the open-source community has to offer
  • Zebra stripe a table, spin an AJAX notification, create sliding volume meters, open a menu accordion style, and more

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.

Authors

Table of Contents

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

Book Details

ISBN 139781849515689
Paperback276 pages
Read More