Thursday, May 10th, 2007

MooTools Video Tutorial

Category: Examples, MooTools, Recording, Screencast

Rick Blalock has released a free version of his MooTools video tutorial that covers:

  • Lesson Two – De-Cluttering the Membership Page
  • Lesson Three – Using MooTabs to Condense Related Products
  • Lesson Four – Using a MooTools ‘Light Box’ to Create a Friendly Gallery
  • Lesson Five – Using Fx.Styles to Control Font Size
  • Lesson Six – Creating a Sliding Sub Menu with MooTools
  • Lesson Seven – Implementing Reflection Javascript for Images
  • Lesson Eight – Creating a Sliding Image Menu
  • Lesson Nine – Using AJAX with the Sliding Image Menu

Posted by Dion Almaer at 9:06 am

3 rating from 127 votes


Comments feed TrackBack URI

I especially like the reflection tutorial. Imagine, adding class name to an image – the doors this will open up for us all!

I will not add my rant about reflecting images using Javascript, but I am saying it in my head.

Comment by Dan — May 10, 2007

Needs narration…

Comment by Shawn — May 10, 2007

I’ve just tried watching one of these, using the latest version of Flip4Mac and I just get a green screen. Guess its likely to be WM10 or WM11 encoded so just a warning for Mac users.

Comment by Geoff — May 10, 2007

Yeah there is a known problem for MAC users and newer encoding of the WM players. Sorry about that but can’t do anything currently for it.

Comment by Rick Blalock — May 10, 2007

Shawn, I hear a narration when I watch the videos.

Comment by Ed Knittel — May 10, 2007

Nice video serie!

I was kinda shocked to see MooTabs in there LOL I’m the one who coded it, but I never thought anyone knew about it…! :)

Comment by SilverTab — May 10, 2007

great job on MooTabs. :-) I just thought I’d create a series using it because it’s so useful. I thought I wrote you about it, no?

Comment by Rick Blalock — May 10, 2007

Yes I remember now!…
I wish I could put more time into it… I started working on a completely new version that offers more flexibility (both for the design/look of the tabs, but also for it’s usability). Haven’t worked on it for a while now though… I’ll have to get back to it! Especially with 1.1 out now! :)

Comment by SilverTab — May 10, 2007

Rick, how about uploading them to Google Video?

Comment by Martin — May 10, 2007

I just watched the lessontwo.
That has got to be the ugliest, most complex code I’ve seen for a simple collapse/expand.
And when he copied that block of code and pasted it two more times right below, I almost choked. Then he couldn’t get it to work properly the first three times because he had so much redundancy in weakly typed strings.
I can’t even imagine what the mootools code would look like if one tried to do something actually complex.

Comment by zoro — May 13, 2007

Please don’t use the coding examples provided in that video as an indication of what well scripted Moo-based code looks like. This guy’s just hacking some crap together for the sake of looking smart. Mootools is all about unobtrusive JavaScript and REAL code reuse (as in, not copying and pasting “reuse”).

Comment by Michelle — May 13, 2007

zoro, please dont think that mootools is a complicated framework just because of this awful awful tutorial.

wow, the man in charge of these tutorials really knows nothing about mootools. That was the worst tutorial ive ever seen, and it makes mootools look so much more complicated than it actually is. I really hope no one trusts that this guy knows what hes talking about…

come to the mootools forums if you need to know how to do something, and you will be taught the right way to do it…

Comment by tomocchino — May 13, 2007

The MooTutorials are basic. There is no effort what so ever (obviously) to keep, for instance, AJAX code codified. The tutorial series came because of several clients of mine (Who know nothing about javascript). They wanted to be able to add some CSS styles and be in control of what they were doing. This was the simplest way of doing it and I made tutorials while I did it.

It is not meant to be a replacement for the MooTools docs or general javascript practices. This tutorial was meant to help people learn and, nothing more.

If you would like to write a simple javascript tutorial with unobtrusive code that has no reuse (that is a continuation of the current series) then contact me and I’ll pay you to do it (seriously, as an “Optimizing javascript” is planned).

But just keep in mind I am trying to help people who haven’t a clue first. Not the javascript guru looking for fewer lines of code.

Comment by Rick — May 14, 2007

How is teaching someone the wrong, more complicated way and then later teaching them the easier, better way more effective than just teaching the simpler method in the first place? It’s like teaching someone how to use the spacer.gif hacks of table-based layouts, just so you can teach them CSS later.

Comment by Michelle — May 14, 2007


Ok. I give. After thinking about the comments on this page, I agree, it would have been better to teach it the way you’re suggesting. It would have also given MooTools better credit for what it is.

But, since you and the rest of the MooTools zealots wish to purify the web of javascript heretics like myself – would you like to make a series optimizing the code for production sites?

Comment by Rick — May 14, 2007

Rick, I’m not a zealot who wants to purge the web of JS heretics. I have no problem with you if you want to put script tags in your pages. I just don’t like it when people teach other people to put script tags in their pages. Especially when the framework itself makes it so much easier not to.

Comment by Michelle — May 14, 2007

hi people, the videos are pretty good but i’m new too mootools and i just can’t put this examples to work and i think my error has something about the mootools.js file, if i use the original mootools file more all plugins, it don’t have some class´s used in this examples like fx.styles and others so were can i get a full mootools with this class’s to put this examples working in my house.
Thanks for help.

Comment by nunocosta75 — December 2, 2008

Leave a comment

You must be logged in to post a comment.