Mootools - my brain hurts

I've been pretty busy the last few days trying to create a  website template. A special website, one that would provide users with a pleasant and unique experience. Well, at least unique. I don't know what I was thinking. It was a lot of work, seeing as I don't know very much about JavaScript (besides the basic functions) or the MooTools framework. Now I feel sorry I even tried to do something new.

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 ...

The problems

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.

The main issue with JavaScript is that some people disable it. That's their choise, can't do anything about it. But then I thought: if they have JavaScript disabled, they should still see the content and they should still be able to browse it. Well in theory, it is possible. I mean, MooTools just catches the click event and does something else instead of sending you directly to the page. So having JavaScript disabled should send you to the page, no? Well no. And I have no idea why. I guess it's something related to the way I coded the functions. But I've put that asides for the moment. I'll deal with it later.

After checking that my awesome page was working in both Mozilla Firefox (version 3.0) and the dreaded Internet Explorer 6, I thought about giving it a try from my mobile phone. I have a Nokia N81 8GB and I used the default Nokia Browser. Don't know what version, don't ask. Of course the page didn't work. I've seen the same thing happen as with Firefox with JavaScript disabled: couldn't even get past the front page, the one with the four big buttons. I decided this will be resolved, probably, when I'll fix the previous issue. Which is 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.