MooTools

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.

Create a page with the following HTML.

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.

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.