Book Image

MooTools 1.3 Cookbook

By : Jay L Johnston
Book Image

MooTools 1.3 Cookbook

By: Jay L Johnston

Overview of this book

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.

Related Content you might be interested in

Current Title:

Small book image
MooTools 1.3 Cookbook
Jay L Johnston
Jul, 2011 | 276 pages
No titles found
Table of Contents (17 chapters)
MooTools 1.3 Cookbook
MooTools 1.3 Cookbook
Credits
Credits
About the Author
About the Author
About the Reviewer
About the Reviewer
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Oldies-but-Goodies: Foundational Moo
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
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
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
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
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
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
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
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
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
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
Index

Removing a chain of events

Extending upon the chain of events created in the previous section, this recipe shows us how to clear a chain of events using Chain.clearChain().

Getting ready

Get ready to call this function by adding a widget to which our clearing function can be bound.

<input type="button" id="mycancel" value="Clear Chain"/>

How to do it...

Calling the clearChain() method of the my_chain object, which is an instantiation of MooTools Chain, removes the current call stack completely. 

$('mycancel').addEvent('click',function() {
alert('Clearing chain:'+my_chain.$chain.length+' actions');
my_chain.clearChain();
alert('Done! Chain has:'+my_chain.$chain.length+' actions');
});

How it works...

Each call to my_chain.chain(advance_one_number) added another array argument to the internally maintained $chain array. This array is a property of the chain object instantiation. Calling my_chain.clearChain() zeroes out the $chain property of my_chain.

There's more...

As seen in the next screenshot...

Previous Section
End of Section 9
Next Section