Final Class Project: Complete!
This tutorial seems to be defunct(broken) with the latest release of MooTools 1.0(01/31/2007) So please use this as a reference to understand how mootools works but the code I used in the video is no longer valid … I do plan on release an updated version of this video as well as a few others. I will update this post when that happens.
I have finally completed my project for CIM269a which is Beginner Javascript @ Saddleback College. My project was to use a framework and show it being used as well as giving an example of how it can be used in a real life scenario.
I used Mootools for the frameworks just because it looks to me like an easier to understand framework and the functions that are built in are just perfect. The size and feature are just right.
I created a Video Tutorial of how to apply an Accordion effect to div blocks in a page and create a hands on feel to the site. I did do my best on exampling how to do it as easily as possible in the video … It took me many tries to get the video just as close to perfect as I could.
If you enjoy and learn from the video fantastic that was my main goal and if you didn’t really enjoy it or learned something from it but maybe got 1% of something back from it then hey you know that makes me happy also.
A real quick note I noticed that Mootools is now at revision 7273 in the SVN repository revision 83 and I still have revision 70 in the projects file zip. There was no changes that would affect the tutorial or the files. I decided not to update what was in the zip file.
What are you waiting for?!?!?! Go download the video and project files already!
-> Video Download Mirror 1 (FAST)
-> Video Download Mirror 2 (FASTER)
-> Link to Video on Google Video (You will need Flash)
-> Project Files
-> My Personal School Homepage (which holds the real life scenario and other projects I have done or I am working on for school)
You will need something like 7zip or IZArc or anything else that handles the 7z format to extract the movie. Also you will need Quicktime or something that handles MOV files to play the video.
Have any questions on the video contact me or post a comment.
I hope to do more of these … I enjoyed doing it.
EDIT: I had to change the URL of my School site because I was deleted from their servers … so I am now hosting it on my site instead 
.
Related posts:
- Mootools Accordion Help?!?! I notice a lot of people are still coming to...
- Two Mootools Tutorial Videos Coming Yup that’s right I am finally going to put up...
- New website and Open Source Project! Hey I am working on a new website called Phoky....
- Mootools Videos still coming! Don’t worry I am still planning on it. As a...
- 100% confirmed! Mootools Video this week! I will have the revised version of the mootools screencast...
Wouldn’t it have been better to show the site in Safari or IE since Camino runs on the GECKO engine?
Well I should have shown in Safari your right, being that I was on a Mac. Shame on me! I a sure you though that it all works the same. I would have shown it on IE but running Mac I can’t use IE
. This is why I offered a edited and unedited version of the project so people can test in any browser they would like.
I will make a note … next time use different engine browsers to compare
. Thanks Brandon!
I think you did an excellent job on your school project especially given the fact that we could not make it to school that night. The tutorial was easy enough for ME to follow and the compression format made things much quicker than it would have been considering the fact that the original size of the files was over 100megs. Good Job! Here comes another A!
Kinda outdated isnt??
people being using accordion by years now, maybe you can make a Wysywing web editor tutorial too??
Well it’s not really outdated. The effect itself hasn’t been around long. If you are thinking about drop down menu type stuff then yes that has been around for a very long time but the accordion effect is different where it reacts to what section you pick to expand.
Also this is using a framework which I wouldn’t consider outdated as well.
If you can explain to me how this is outdated I would love to hear it. Thanks for the feedback!
Hey,
I found your website via the official Moo.FX site.
Great tutorial, very well done.
although I was originally looking for a horizontal accordion, this tut. gave me a look into the moo.fx world that I hadn’t have (since I didn’t have one at all, but that’s a whole different story)
Thanks a lot!
I find this tut via mooTools oficial website, i was looking for some documentation on this framework and i found this website, this is very cool, i’ve some experience, with PHP4/5, and CSS, but not very confortable with JS for now, i’m trying to get my website a bit more fancy, and i think this is a great help, thanks.
Maybe you can edit some printable tuts for the mootools framework functions and methods, i manage to make ajax calls with the framework now but cant find any info on how to put a loading image while the content is being retrived.
I will be working on some new videos these coming weeks not sure now long it will be for me to put it out. I have some major projects going on at work but I will hopefully have 2 out by the end of this year.
Thank you for this very well done tutorial!
yeah this is really cool. thanks for this great tutorial. I wonder which one is better, mootools or scriptaculous?
good work this helped me so much.
Thanks for the tutorial, very interesting and useful for newie like me.
Now I have a question ( or more..
) how can I use this effect like is used in this site http://www.giuliorasini.it/#home
I mean the part on linking from the menu and show or hide the divs.
Thanks in advance!
Billybody, well he is using moo.fx and even though that is the base of mootools the version that site is using seems to be an older version. I wish I could help you right away and tell you how to do it but since mootools is now in version 1.0 a lot has changed. As well as this video tutorial is not obsolete BUT I am will be updating this one and adding to it in parts on how to use different styles with the Accordion effect like the site you mentioned.
Now if you want ot knowhow he did it look @ the websites source and look for the moo.fx part the file interazioni.js is the code that he uses to run the accordion effect on the site. Once you see that you will notice the similarities from the code I used in the video. You might be able to figure it out from that point on.
If you have any questions you can email me or just post a comment again
. Good luck!
Thanks, check your mail.
see iu around
Hi thanks for the tutorial, i’m just getting into mootools and this helped, but I have a problem. Theres a gap between in each element in my list of items (ie, the box titles, when closed) when using your tutorial. Theres no margins or padding specified in the CSS so i dont know why this is, any ideas?
thx for this tutorial and especially for your deli.cio.us links!
I`d turn on everybody to check this out. great ajax stuff…
greetings
Thanks thanks thanks. You can imagine how hard it is to implement this to someone who doesn’t know any Java. You saved me. God bless you.