MooTools 1.3 Cookbook

MooTools 1.3 Cookbook

By : Jay L Johnston

Buy this Book

MooTools 1.3 Cookbook

By: Jay L Johnston

Buy this Book

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.

MooTools 1.3 Cookbook

Credits

About the Author

About the Reviewer

www.PacktPub.com

Preface

Free Chapter

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

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

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

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

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!

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

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

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!

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

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

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Changing graphics upon MOUSEOVER

Many corporate websites make use of this content-changing mechanism to bring a new level of professionalism to their front pages.

Getting ready

Launching off our previous recipe, we add a new level of interaction. Prepare both the mouseover and mouseout Element.addEvents() code blocks, as well as three images to use for the new DOM element that will be updated when our button listeners are fired. This screenshot shows how the lady figurine appears when the Witch button is moused over:

How to do it...

The mouseover action is adjusted with a new line of code that uses the button/image naming structure to update the background style properties of the DOM element pic.

...
'mouseover':function() {
this.setStyles({'color':'#FFF', 'background-position':'bottom'});
var txt = this.get('text');
this.set('text',text_changer(txt));
$('pic').setStyle('background','#FFF url(07_'+txt+'.jpg) no-repeat top left');
},
...

How it works...

The mouseover action allows the use of the...

MooTools 1.3 Cookbook

By : Jay L Johnston

MooTools 1.3 Cookbook

By: Jay L Johnston

Overview of this book

Related Content you might be interested in

Current Title:

MooTools 1.3 Cookbook

Changing graphics upon MOUSEOVER

Getting ready

How to do it...

How it works...