Book Image

Moodle JavaScript Cookbook

Book Image

Moodle JavaScript Cookbook

Overview of this book

Moodle is the best e-learning solution on the block and is revolutionizing courses on the Web. Using JavaScript in Moodle is very useful to administrators and dynamic developers as it uses built-in libraries to provide the modern and dynamic experience that is expected by web users today.The Moodle JavaScript Cookbook will take you through the basics of combining Moodle with JavaScript and its various libraries and explain how JavaScript can be used along with Moodle. It will explain how to integrate Yahoo! User Interface Library (YUI) with Moodle. YUI will be the main focus of the book, and is the key to implementing modern, dynamic feature-rich interfaces to help your users get a more satisfying and productive Moodle experience. It will enable you to add effects, make forms more responsive, use AJAX and animation, all to create a richer user experience. You will be able to work through a range of YUI features, such as pulling in and displaying information from other websites, enhancing existing UI elements to make users' lives easier, and even how to add animation to your pages for a nice finishing touch.
Table of Contents (15 chapters)
Moodle JavaScript Cookbook
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface

Fading out an element


In this recipe, we will produce a fade-out effect by animating a change in opacity of the element from 100% to 0%. This offers a more subtle approach to making an element become invisible than simply using CSS to change the visibility or display properties to hidden or none.

We can see the key steps in this animation by looking at the following selection of frames:

How to do it...

We begin by creating a PHP page to load the Moodle programming environment, which in turn loads the YUI3 environment with which we will be working.

In this example, we create an anim_fadeout.php file with the following content:

<?php
require_once(dirname(__FILE__) . '/../config.php');
$PAGE->set_context(get_context_instance(CONTEXT_SYSTEM));
$PAGE->set_url('/cook/anim_fadeout.php');
$PAGE->requires->js('/cook/anim_fadeout.js', true);
echo $OUTPUT->header();
?>
<div id="anim-container" style="border:1px solid black;background-color:#0099FF;float:left;padding:30px;">...