Here's what my torment was all about. I wanted the user to be greeted by the main menu and that's all. Four big buttons on the front page, beautifully colored, Web 2.0 style. I heard somewhere (everywhere actually) that that's the way to go these days. All websites must be compatible with the Web 2.0 standards. Which is pretty stupid if you ask me, since there are no Web 2.0 standards. Several people have tried to define them, but there is no international organization that implemented them. From what I know at least. But let's carry on. The first page is loaded in an invisible container (div), so it can be indexed by the search engines. From the four big buttons, the user can access the main sections of the website. As soon as he/she clicks one of them the animation for the menu kicks in:
- the buttons get smaller
- they move to the top of the page. at the same time, the header or logo of the website moves to the left to make room for the incoming buttons
- the invisible container loads the page that was requested by the user. If the user requested the first page (Home), the current content stays in place because it was already loaded
- the container appears, but with a height of 0 pixels and gradually increases its size to the required height (this animation takes about 2 seconds)
And then you have a page as you would expect a web page to look. I thought this was great, but I wanted to take it a little bit further. So I added a similar resizing effect to the main container so that each time a user requests a new page, it would shrink to a height of 0px, load the page and then expand to the required height. And all of this was done using the MooTools framework. I could have used Adobe Flash and obtained the same effect, but nooo, I used MooTools. The advantage of this is that the pages are still indexed by search engines. All of them, since all links are in the HTML. "Good!" I said to myself. And then I added "You did a great job!". Had I only knew ...
I head on over to mootools.net to get the MooTools framework and get started on coding. Once there, I notice the new layout. They probably redecorated. Hit download, skip the text, fetch a full copy of MooTools. Start coding a few things to get in the mood. Five minutes later: "Drag is not defined!" I was like: "What do you mean?!" Head on back to the mootools.net and notice that the Drag class/library (?) needs to be downloaded separately. Apparently there were a few more changes, other than the layout. That's OK, grab all the libraries. Now we're cooking.
Not knowing to work too well with classes (shame on me) and not knowing anything about classes in MooTools, like any other learning eager individual, I went over to Google and started typing all my worries. Google, like a kind and sensible search engine, gave me all the links I needed to solve my problems. Of course, most of them were sending me to the official MooTools forums. Which are not there anymore. Apparently since the release of the 1.2 version of the framework. They were moved to Google Groups for more stability. Noticing that I can't find an example that I can use, I decided not to use classes. I don't really feel like learning anyway. So I did the things the old fashioned way: hard coding every little effect every time I needed it. Not at all nice, but I'll get back to it later.
A few more bugs in the code, both mine and the compressed version of MooTools, fixes, stitches, aches and pulled out hair. I'm now tired. But I got the thing working eventually. The code is not at all optimized, there are the errors I mentioned earlier (and probably a lot more) and by the time I finished, I got bored with the page loading animation. But it was a learning experience. It would have been a lot easier if the MooTools team would have set up a more detailed demo page, like the one from the 1.1 version. By the time I'll try something like this again, they probably will.