Phew! We've taken a real whistle-stop tour through the jQuery Tools library, and looked at some exciting features that you can use in your own projects.
Time for a rest, methinks…Not so fast, my friend! We still have one more section to look at, Toolbox.
Toolbox? What's this all about then?
It's a small collection of tools that can be used with the main tools from the library—think of it as using an extension arm on a socket set, for example. This Toolbox includes functionality that allows embedding of Flash movies, as well as being able to go backwards in your browser, or control your mousewheel within your pages.
Let's get started and look at each in a little more detail, beginning with FlashEmbed.
Note
It is very likely that there will be significant changes to this section of the jQuery Tools library in future versions—as you will see, it contains functionality that is fast becoming superseded by advances in HTML5, CSS3, and jQuery. I've included it in this book to make you aware of what is still possible, although most likely, it will not be backward compatible with version 2 of jQuery Tools when that becomes available on general release.
Adobe's Flash™ technology became the de facto standard for embedding Flash-based movies into web pages, and since its introduction in 1996, it has been developed for use on a wide variety of platforms, including Linux, Tablet PC, Blackberries, and of course, Windows.
The downside of this capability is that not every browser works with the same embedding code—enter jQuery Tools' FlashEmbed, which allows you to embed Flash using the same configuration options, while the library handles the backend embedding code.
Note
Note: The advances in JavaScript and HTML5 technology are beginning to make the use of Flash embedding technology redundant, as most modern CSS3-based browsers are able to handle videos using the<video> tag, without the need for additional software. It is very likely that FlashEmbed may disappear from future versions of this library, once HTML5 and CSS3 become more widespread and older browsers such as IE5 and IE6 disappear from use.
Embedding Flash files is simplicity itself; there are three parts to set up a basic Flash capability in your web pages.
First you need to include the FlashEmbed script on your page:
<script type="text/javascript" src="toolbox.flashembed.min.js"> </script>
In keeping with the principle ethos of jQuery Tools, it is recommended that you use the minified version of the library to keep the download times as low as possible. You then need to have a HTML container for the object; we are using a DIV element in our example. This has an id attribute to reference this container later in the embedding:
<div id="clock"></div>
Unlike other projects in this book, we are not going to try to build something useful for a potential client, but have a look at FlashEmbed, and how you could use it to embed Flash, while still maintaining support for older browsers.
With this in mind, let's set up a basic HTML structure, using the following code:
<!DOCTYPE html> <html> <head> <title>jQuery Tools standalone demo</title> <!-- include the Tools --> <script src= "http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"> </script> <!-- standalone page styling (can be removed) --> <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/> </head> <body> </body> </html>
We need to include a space on the page for the video, so copy in the following code to your webpage:
<div id="flash2"> <img src="play_text_large.png" alt="" /> </div>
We need to add a little extra styling, the following code will reset the fonts used, and centre the video on the page; the styling for #flash2 will add a play button in the middle of the image:
<style>
#flash2 { width: 787px; height: 300px; background-
image: url(splash.jpg); text-align:center;
cursor:pointer; }
#flash2 img { margin-top: 110px; }
</style>
The FlashEmbed tool available in jQuery Tools does not require the use of jQuery to function, although it is supported if you need it; this is an example of how you could use it. Copy the following script into the<head> section:
<script>
// use the jQuery alternative for flashembed.domReady
$(function() {
// bind an onClick event for this second Flash container
$("#flash2").click(function() {
// same as in previous example
$(this).flashembed("http://static.flowplayer.org/swf/flash10.swf");
});
});
</script>
If everything worked fine, then you should see a video play, as follows:
While Flash is still very useful, it is fast becoming an old technology; early iPads and other products did not support it, although this is changing for later models. However, HTML5 and JavaScript are taking over—HTML5 includes support for the<canvas> and<video> tags, without the need for additional support. This allows for many Flash-like behaviors and visualizations to be built with simple HTML, CSS, and JavaScript; images could equally be used, although in many cases, they won't be required. Support for both tags is still mixed, with better support in WebKit and Mozilla-based browsers than in Internet Explorer; FlashEmbed comes into its own by allowing Flash to be played in older browsers, using a common standard—the library handles the different embedding code required.
On a different note, you can also use FlashEmbed to embed fonts, using the SIFR technology; this should be used with caution, as the technology hasn't been updated for quite some time. Browsers contain support for @font-face, which allows the display of fonts in all major browsers including IE6-9, Firefox, Chrome, and Safari, without the need for additional external libraries. SIFR will only work for embedding small Flash files, as it is processor-intensive and carries a big overhead for very little extra benefit—you should use it with care!
Moving on, let's now take a look at the history plugin, that is available as part of jQuery Tools.