MooTools 1.3 Cookbook - Jay L Johnston - E-Book

MooTools 1.3 Cookbook E-Book

Jay L Johnston

0,0
34,79 €

-100%
Sammeln Sie Punkte in unserem Gutscheinprogramm und kaufen Sie E-Books und Hörbücher mit bis zu 100% Rabatt.

Mehr erfahren.
Beschreibung

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.

Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:

EPUB
MOBI

Seitenzahl: 258

Veröffentlichungsjahr: 2011

Bewertungen
0,0
0
0
0
0
0
Mehr Informationen
Mehr Informationen
Legimi prüft nicht, ob Rezensionen von Nutzern stammen, die den betreffenden Titel tatsächlich gekauft oder gelesen/gehört haben. Wir entfernen aber gefälschte Rezensionen.



Table of Contents

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

MooTools 1.3 Cookbook

MooTools 1.3 Cookbook

Copyright © 2011 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: July 2011

Production Reference: 1150711

Published by Packt Publishing Ltd.

32 Lincoln Road

Olton

Birmingham, B27 6PA, UK.

ISBN 978-1-849515-68-9

www.packtpub.com

Cover Image by Fillipo (<[email protected]> )

Credits

Author

Jay Larry G. Johnston

Reviewers

Harald Kirschner

Andy Meerwaldt

Thiago Santos

Acquisition Editor

Sarah Cullington

Development Editors

Hyacintha D'Souza

Kartikey Pandey

Technical Editors

Conrad Sardinha

Aaron Rosario

Project Coordinator

Michelle Quadros

Proofreader

Chris Smith

Indexer

Hemangini Bari

Production Coordinator

Shantanu Zagade

Cover Work

Shantanu Zagade

About the Author

Jay's first web work was in 1996 for the United States Army where he served the 5/5 Battalion Headquarters with the 2nd Infantry Division in South Korea.

Currently full time as Senior PHP Developer for ICGLink, Inc. managing high-end, custom development for the 2,000+ client base, Jay holds certifications in Linux, MySQL, and PHP5.

Introduced to the MooTools framework in 2007 while on permanent contract at Marshall Space Flight Center, Jay has incorporated Moo into every single new development since and frequently writes canned moo-solutions for use within the company.

To know more about the author, visit his website at http://jayjohnston.com.

About the Reviewer

Andy Meerwaldt is a Dutch web developer with a BIT (Bachelor of Information Technology) degree, and has been developing PHP applications since 2004. He started using the Kohana Framework as his default framework. He has improved on his skill in Object Oriented Programming and the use of Design patterns over time. His aim is to build better and smoother web applications with full functionality for raising the user experience.

Besides PHP Andy is experienced in JavaScript and is still adopting new techniques and best practices for getting the most out of the Web. Further on, he's interested in high scalability, performance, and usability.

www.PacktPub.com

Support files, eBooks, discount offers and more

You might want to visit www.PacktPub.com for support files and downloads related to your book.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and, as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at <[email protected]> for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on Packt books and eBooks.

http://PacktLib.PacktPub.com

Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can access, read, and search across Packt's entire library of books.

Why subscribe?

Fully searchable across every book published by PacktCopy and paste, print, and bookmark contentOn demand and accessible via web browser

Free access for Packt account holders

If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access.

Bright Holly, Christian Lake, and Kwon Myoung-hee, thank you, my dear ones.

Preface

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 the beginning to the end 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, stand-alone, recipe solutions.

What this book covers

Chapter 1, Oldies-but-Goodies: Foundational Moo. Learn foundational MooTool basics like including MooTools in HTML, making and looping over arrays, grabbing elements, and dragging items!

Chapter 2, Switching Paddles Midstream: Changing HTML After Page Load. Delve into changing HTML after load with working examples of finding, moving, adding, and removing elements and groups of elements.

Chapter 3, And on the 8th Day: Creating HTML Elements. Create HTML elements like IFRAMEs, A tags, and form elements and inject them into tables, table rows, and div elements.

Chapter 4, That's Not All Folks: Animation and Scrolling. Animate the Internet with morphs, tweens, slides, and scrolls. Make thumbnails scroll and users drool.

Chapter 5, Mr. Clean Uses Ajax: Remote Asynchronous Calls. Fire remote Ajax calls, on page, bringing them into the Web 2.0 arena where user interfaces are cool and fun.

Chapter 6, Easy Come, Easy Go: Drag and Drop. Drag and drop your way to shopping carts and interfaces that create return users and Internet buzz.

Chapter 7, Knock and the Door Will Open: Events and Listeners. Open the door to flexibility and functionality by adding event listeners and chains of actions.

Chapter 8, Dynamite! (Movin' On Up): Working with Transitions. Use transitions to save space, welcome users, make ducks bounce, and golf balls roll.

Chapter 9, WTFudge is Going On?: Troubleshooting MooTools. Troubleshoot scripting issues with tools of the professional development trade.

Chapter 10, Enough Is Never Enough: Extending MooTools. MooTools is highly extensible and allows for simple extension of existing classes and DOM elements. Level up by extending MooTools with custom plugins.

What you need for this book

To run the examples in the book following software will be required:

Web Server: Apache recommended
Apache 1.3 or Apache 2.x, Apache 2.x recommendedMicrosoft IIS 5, IIS 6 or IIS 7, IIS 7 recommended

#

Software Name

URL

1

Apache

http://httpd.apache.org/

2

Microsoft IIS

http://www.iis.net/

Additionally the following tools are helpful, but are not strictly required:

PHP:
PHP 5.2 recommendedPHP 5.2 or PHP 5.3, PHP 5.2 recommended
ColdFusion:
ColdFusion 8 or 9 recommended

#

Software Name

URL

1

PHP

http://php.net

2

ColdFusion

http://adobe.com/support/coldfusion/downloads.html

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.

Conventions

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text are shown as follows: "Please do always include a DOCTYPE, and opening HTML, HEAD, TITLE, and META tag for the HTTP-EQUIV and CONTENT".

A block of code is set as follows:

$('my_trigger').addEvent('click',function() { this.set('html','Click Me<br/>'+(++count)); ...

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

<div id="my_trigger" style="width:100px; height:100px; border:1px solid #BEBEBE; line-height:50px; text-align:center;">You Found Me!</div> <noscript>JavaScript is disabled.</noscript>

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "The link labeled GET MOO.FX FOR MOOTOOLS leads us to MooTools".

Note

Warnings or important notes appear in a box like this.

Tip

Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via the subject of your message.

If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or e-mail <[email protected]>.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.

Piracy

Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at <[email protected]> with a link to the suspected pirated material.

We appreciate your help in protecting our authors, and our ability to bring you valuable content.

Questions

You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.

Chapter 1. Oldies-but-Goodies: Foundational Moo

Foundational MooTool basics top the record charts both in the good old days and in this chapter: MooTool versions, documentation, and hosting:

Elements, arrays, and objectsFlat craziness like anonymous functions and arrays!

MooTroduction

All Packt Publishing Cookbook Series books are meant to be read without procedural constraint. That means, we can open any page in the book and just start mooing. This book, being a cookbook, follows that crucial precept while also harboring a secret agenda to move from smaller concepts to larger concepts for the benefit of any potentially existing procedural readers. Those of us that may be new to these concepts will benefit greatly from this chapter.

MooTools was conceived by Valerio Proietti and copy written under MIT License in 2006. We send a great round of roaring applause to Valerio for creating the Moo.FX (My Object Oriented Effects) plugin for Prototype, a JavaScript abstraction library. That work gave life to an arguably more effects-oriented (and highly extensible) abstraction layer of its own: MooTools (My Object Oriented Tools).

See also

Find more information about Moo.FX at http://moofx.mad4milk.net/. The link labeled GET MOO.FX FOR MOOTOOLS leads us to MooTools, which is exactly what we are delving into; so we continue, confident that with MooTools, we are getting what Moo.FX has become.