Talk In Code

Strictly speaking the Google Ajax libraries don’t contain only Ajax libraries, but they are very useful for a variety of reasons. Google host a variety of different JavaScript libraries which you can link to on your pages rather than download the library and host it on your server. You can use MooTools, JQuery, Prototype/Scriptaculous, Dojo and even the Yahoo! User Interface Library.

How To Use Them

Using the Google Ajax libraries on your own site is quite easy, and you can do it in a number of different ways.

Normally, you would download the latest and greatest version of your chosen library and upload it to your site. Here is an example using the MooTools.

<script type='text/javascript' src='http://www.talkincode.com/'></script>

You can include this via Google using the following.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools-yui-compressed.js'></script>

If you are working on a development server you can also include the uncompressed version so that you can see where any errors are coming from.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools.js'></script>

If you want to download version 1.11 instead of version 1.2.1 by changing the folder:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools.js'></script>

You can also use the google.load() function to include the library you want with a single function call.

<script src="http://www.google.com/jsapi"></script>
<script>
  google.load("mootools", "1.2.1");
</script>


Ease Of Use

You have to admit that this method of including JavaScript is much easier than downloading the library manually, uploading it and then sorting the script tags out.

Quick Downloads

The first benefit of using this service is that users will not have to wait very long in order to download the JavaScript libraries that your site relies on to work. This is because they are downloading it from Google and not your site.

Concurrent Connections

Your browser can only open a certain number of connections to a domain; this is partly due to how browsers work but also due to how servers work. If you host your JavaScript libraries with Google then your browser will be able to run off and get them whilst it is downloading your page making the page load a little faster.

Better Caching

Rather than repeatedly downloading files from a site over and over again a browser will try to minimise this by only downloading what it hasn’t downloaded already. This is fine if you spend all of your time on a single site, but most people don’t and they will therefore download the same version of the same JavaScript library over and over again. This happens even if the server has aggressive caching turned on. By hosting your libraries with Google you basically allow a user who has visited a site using the same library as you to reuse the file they downloaded there on your site.

Don’t Use On Your Intranet

There is one small issue if you are using this sort of thing on an Intranet system in that it will create unnecessary network traffic from your network. This method can also leave Intranet systems utterly useless if your Internet connection goes down for whatever reason. Holding your JavaScript libraries locally will mean that your systems can continue to work, even if you are cut off from the outside world.

Word Of Warning

Some countries actively block connections to some sites; especially Google. So if you do include JavaScript libraries like this then the chances are that someone in Iran or China will certainly not be able to view any JavaScript components and might even get a load of authentication errors.

More Information

For more information on the different libraries available take a look at the Google Ajax Libraries page.

The MooTools slider is a good little application, and creates a reliable means of adding in a slider tool to a site. However, one thing that the MooTool slider is missing is a block that covers what is on the left hand side of the slider, before the handle.

Before we go into to how to create the tool, I have created an example of the slider. The colours are deliberately garish in order to show the different elements of the slider.

Create a page with the following HTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="./script/mootools.js"></script>
<link href="./style/slider.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="track1">
<span id="track1span"></span><div id="handle1"><img src="./style/slider/handle.png" id="handle1Image" alt="Drag Me" /></div>
</div>
<p id="test"></p>
<script type="text/javascript" src="./script/slider.js"></script>
</body>
</html>

The slider element has the following structure.

div <- container for the slider
---span <- the span element
---div <- handle
------img <- image to make the handle pretty


You will need to download the MooTools library to run this tool.

Create a style file (called slider.css in a directory called style) and add the following content.

#track1{
 width:500px;
 padding:0;
 margin:0;
 height:18px;
 background-color: #09f;
}
 
#handle1{
 padding:0;
 margin:-20px 0 0 0;
 width:18px;
 height:18px;
}
 
span#track1span{
 display:block;
 padding:0;
 margin:0;
 background-color: #222;
 height:18px;
 width:50%;
}


Now for the important part of the script. Create a file called slider.js in the script directory and add the following code in. I have put lots of comments in here to make it clear what each line is doing.

// set up track array
var handleArr = new Object();
handleArr["track1"]=250; // set initial value
 
// set up effects for the slider
var track1Span = new Fx.Style($('track1span'),'width',{duration:0});
 
var slider1 = new Slider($('track1'),$('handle1'),{
 steps:500, // there are 250 steps in the track
 offset:0, // offset of zero fits the handle into the track
 onChange: function(pos){
 track1Span.set(pos);
 handleArr['track1'] = parseInt(pos); // store position
 updateTestDiv(); // run function to do something
 }
}).set(handleArr["track1"]); // set initial position
 
// function to update test tag with handle position
function updateTestDiv(pos){
 $('test').innerHTML = handleArr['track1'];
}

All that this slider does is update a p tag with the id of test with the current position of the slider handle.

The ideal thing about this script is that it is fairly easy to add more tracks into it, you just need to duplicate the code slightly to create variables for slider2 and so on.

Rabid Ratings is a neat ratings script written with the Mootools JavaScript framework that makes adding a rating function to any site very easy. The only problem is that when you first install the script it looks like no-one has ever visited your site to leave a rating. To combat this you can create lots of phony data that makes it look like your site is well visited and interesting. One way to do this is by getting lots of people to vote on every rating on the site. However, a much easier way is to do this with a few handy MySQL commands.

The following query will create a random vote of between 50 and 100 for each rateable value.

INSERT INTO rabid_ratings (ratable_id, ip_address, rating, timestamp)
SELECT rabid_ratables.id AS ratable_id,CONCAT(FLOOR(1 + (RAND() * 255)),'.',FLOOR(1 + (RAND() * 255)),'.',FLOOR(1 + (RAND() * 255)),'.',FLOOR(1 + (RAND() * 255))) AS ip_address,FLOOR(50 + (RAND() * 51)) AS rating,NOW() AS timestamp
FROM rabid_ratables
ORDER BY RAND();

Test this data with the following:

SELECT ratable_id,count(ratable_id),ROUND(SUM(rating)/count(ratable_id)) AS vote FROM rabid_ratings GROUP BY ratable_id ORDER BY vote DESC;

The only problem with this is that all of the ratings have the same amount of votes, which makes it look very contrived. Even though it is, we don’t want to make it look like that. The solution to this is to delete a random number of votes for each ratable value. The only problem is that you can’t use the RAND() function within the LIMIT clause of a MySQL statement. So therefore you can use the following bit of PHP to delete a random number of votes.

echo 'DELETE FROM rabid_ratings WHERE ratable_id = 1 ORDER BY RAND() LIMIT '.rand(1,100).';';

By incorporating this into a mysql_connect() function call you can run it for every rateable value and make it look like some items have more votes than others.

If you are looking for information about the MooTools JavaScript framework then your first stop should be the MooTools home page. The site not only allows you to download MooTools, but it is also a great resource for learning how to use MooTools.

There are examples of all the things you can do on the demo page, and information about all of the classes available in the framework on the documentation pages.

If you are wondering if MooTools is worth a look, and the examples haven’t convinced you yet, then take a look at this excelent selector speed comparison between Dojo, JQuery, MooTools and Prototype. MooTools isn’t faster than every framework for everything, but is always the fastest framework overall.

Creating a simple highlight effect is quite easy when you use the JavaScript framework mootools.

The first thing to do is grab the mootools library from the site and link it in your web page. You can select different components with mootools, but if you grab the whole thing you can start to play with whatever you want. Put this line of code in the head section of your web page.
<script type="text/javascript" src="mootools.js"></script>

For this example I want the highlight to occur when the page has finished loading. So I use the window.addEvent function to add an action for the ‘domready’ event to the window object of the page. Like this.

window.addEvent('domready', function(){
  alert('dom ready');
}

The next step is to create the highlight. This is done by creating a Fx.Styles object and then chaining the colour change. First we change it to black, and then we use the chain command and add another colour change back to white. You can change this to any colour that you like. The duration is also set in the first section of the chain so that it immediately turns to black and then fades slowly to white. Place the following code in the head section underneath the mootools include.

<script type="text/javascript">
window.addEvent('domready', function(){
  var fx = new Fx.Styles($('test'),{duration:2000,wait:false});
  fx.start({
    'duration':0,
    'background-color':'#000'
  }).chain(function(){
    this.start({
    'background-color':'#fff'})
  });
});
</script>


The final step is to create the element that will be used by the script. You can use any element that is visible on the screen (even the body) but for this example we will use a paragraph.

<body>
<p id="test">wibble wibble</p>
</body>

This effect can be used on any web page where you want to draw the users attention to something. This might be an updated section of the page, or a text area on a form.

The reason I have used the Fx.Styles object is so that it is easy to extend the functionality of the highlight. If you also wanted to change the colour of the text along with the background you only have to add in the relevant styles.