I’ve published a lot of Mootools 1.2 Classes. All the classes in one list:
- Mootools 1.2 cvMultipleGooglemaps class
- Mootools 1.2 cvIndex class
- Mootools 1.2 cvSlideShow class
- Mootools 1.2 cvStepSlider class
- Mootools 1.2 cvRelativeTop class
- Mootools 1.2 cvNewsTicker class
- Mootools 1.2 cvElementAppear class
- Mootools 1.2 cvImagesFly class
But when you’re new with using javascript classes you don’t know where to start. That’s why I’ve written this tutorial. You have to make sure that you put all this lines of code between the <head></head> tags.
Include css
First we need to style our html elements. Load the styles using a external css file due to caching possibilities.
Add all the styles to your style.css file. These styles are variable depending on which class you use!
/* This is an example css style. Please use the style which you find at the class page! */
#text {
float: left;
width: 500px;
padding: 10px;
background-color: #EEE;
}
#col {
float: left;
padding: 10px;
width: 270px;
}
Include Mootools 1.2
Change the source if you are using another file structure!
Include one of the the classes
Load the class.
Instantiate and set options
Instantiate the class between the domready event. You can change the behaviour of the class by modifying the options (in this example: ‘col’ (specific element), ‘duration’, ‘between’ and ‘transition’).
The result
Make sure you have all this files in this way of order!
Tip
Before you’re modifying the styles and options please make sure you’ve got the basic examples from this site up and running. If you know that the class is working correctly you can modify the styles and options.
