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.
Table of Contents (17 chapters)
MooTools 1.3 Cookbook
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface
Index

Using Google Library's MooTools scripts


Let Google maintain the core files and provide the bandwidth to serve them.

Getting ready

Google is leading the way in helping MooTools developers save time in the arenas of development, maintenance, and hosting by working together with the MooTools developers to host and deliver compressed and uncompressed versions of MooTools to our website visitors. Hosting on their servers eliminates the resources required to host, bandwidth required to deliver, and developer time required to maintain the requested, fully patched, and up-to-date version.

Note

Usually we link to a minor version of a library to prevent major version changes that could cause unexpected behavior in our production code.

Google API keys that are required in the documentation to use Google Library can be easily and quickly obtained at: http://code.google.com/apis/libraries/devguide.html#sign_up_for_an_api_key.

How to do it...

Once you have the API Key, use the script tag method to include MooTools. For more information on loading the JavaScript API see http://code.google.com/apis/libraries/devguide.html#load_the_javascript_api_and_ajax_search_module.

<!--script type="text/javascript" src="mootools-1.3.0.js">
</script-->
<!--we've got ours commented out so that we can use google's here:-->
<script src="https://www.google.com/jsapi?key=OUR-KEY-HERE" type="text/javascript"></script>
// the full src path is truncated for display here
<script src="https://ajax.googleapis.com/.../mootools-yui-compressed.js" type="text/javascript"></script>
</head>
<body>
<noscript>JavaScript is disabled.</noscript>
<script type="text/javascript">
var mooversion = MooTools.version;
var msg = 'MooTools version: '+mooversion+' from Google';
// show the msg in two different ways (just because)
document.write(msg);
alert(msg);
</script>

Using google.load(), which is available to us when we include the Google Library API, we can make the inclusion code a bit more readable. See the line below that includes the string jsapi?key=. We replace OUR-KEY-HERE with our API key, which is tied to our domain name so Google can contact us if they detect a problem:

<!--script type="text/javascript" src="mootools-1.3.0.js"></script-->
<!--we've got ours commented out so that we can use google's here:-->
<script src="https://www.google.com/jsapi?key=OUR-KEY-HERE" type="text/javascript"></script>
<script type="text/javascript">
google.load("mootools", "1.2.5");
</script>
</head>
<body>
<noscript>JavaScript is disabled.</noscript>
<script type="text/javascript">
var mooversion = MooTools.version;
var msg = 'MooTools version: '+mooversion+' from Google';
// show the msg in two different ways (just because)
document.write(msg);
alert(msg);
</script>

How it works...

There are several competing factors that go into the decision to use a direct load or dynamic load via google.load():

  • Are we loading more than one library?

  • Are our visitors using other sites that include this dynamic load?

  • Can our page benefit from parallel loading?

  • Do we need to provide a secure environment?

There's more...

If we are only loading one library, a direct load or local load will almost assuredly benchmark faster than a dynamic load. However, this can be untrue when browser accelerator techniques, most specifically browser caching, come into play. If our web server is sending no-cache headers, then dynamic load, or even direct load, as opposed to a local load, will allow the browser to cache the Google code and reduce our page load time. If our page is making a number of requests to our web server, it may be possible to have the browser waiting on a response from the server. In this instance, parallel loading from another website can allow those requests that the browser can handle in parallel to continue during such a delay.

We need to also take a look at how secure websites function with non-secure, external includes.

Many of us are familiar with the errors that can occur when a secure website is loaded with an external (or internal) resource that is not provided viahttp. The browser can pop up an alert message that can be very concerning and lose the confidence of our visitors. Also, it is common to have some sort of negative indicator in the address bar or in the status bar that alerts visitors that not all resources on the page are secure.

Note

Avoid mixinghttp andhttps resources; if using a secure site, opt for a local load of MooTools or use Google Library over HTTPS.