part deux: what are my options?
This tutorial is a little more advance and will focus on moofx options and methods. A basic understanding of moofx and its usage is recommended before beginning this tutorial. So if you haven't done so, please read the beginner's guide.
options usage
var myHeight = new fx.Height('box', {duration: 400, transition: fx.sineIn, onComplete: function(){$('result').innerHTML = "opacity effect completed";}});
It may look a little scary but its actually very simple. Basically, its just saying that when myHeight is called it will last for 400 milliseconds and as it changes it will have the transition fx.sineInOut. When this effect is completed, execute a function that writes its been completed inside an element with an id called result.
options example
show effectLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
there's more to it than toggling
There are four methods: toggle, hide, custom, and clearTimer. I'm going to show you how to use the hide method. If you'd like to know more about the other methods please see the moofx documentation.
hidden effects
window.onload = function() {
var myHeight2 = new fx.Height('box2', {duration: 400, transition: fx.sineIn, onComplete: function(){$('result2').innerHTML = "hidden effect has been completed";}});
myHeight2.hide();
$('show2').onclick = function() {
myHeight2.toggle();
};
};
Hopefully by now this code looks obvious to you. Its pretty much the same as the last example. myHeight2.hide(); takes the effect and hides it until it is called.
hide() example
show effectLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Help, I'm still having problems
I understand that javascript can be frustrating, I think everyone feels this way sometimes regardless of their level. Though I welcome your questions, I cannot answer them all so before you email me, please take some time to read the moofx documentation. It is helpful, an easy read, and most of the questions that I'm asked are on that page. If you feel that your question has not been answered in the documentation, try the moofx forums. You can find lots of other examples and modifications there.