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
-
MooTools 1.3 Cookbook
- Table of Contents
- MooTools 1.3 Cookbook
- Credits
- About the Author
- About the Reviewer
- www.PacktPub.com
- Preface
-
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
-
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
-
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
-
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
-
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!
-
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
-
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
-
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!
-
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
-
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
- Index
Product information
- Title: MooTools 1.3 Cookbook
- Author(s):
- Release date: July 2011
- Publisher(s): Packt Publishing
- ISBN: 9781849515689
You might also like
book
Jump Start Web Performance
Despite working on the web every day, few developers have a good word to say about …
video
modo 301 Signature Courseware
In over 14 hours of video training, this course takes beginners through intermediates on a visual …
book
Tradigital Maya
Explore Disney's 12 principles of animation, while learning how to animate in Maya. You can develop …
video
How To Video Series for Visual Studio 2010
Videos designed for Visual Studio 2010 developers, from novice to professional. This set of short videos …
