Thursday, October 12th, 2006
Mootools Accordian Tutorial
Category: Examples
, JavaScript, Library
Isn't it fun to see students doing projects with Ajax?
Jonathan Molina just finished his final project which 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.
You can watch the making of this page in video form but it requires something that groks the 7z format. Not quite as usable as displaying it inline. Maybe someone should put it on GoogTube?
-
-
window.onload = function() {
-
// Pick your classes
-
var myBox = document.getElementsByClassName('box_title');
-
var myBoxOpen = document.getElementsByClassName('expand');
-
-
// Create the accordian
-
var myEffect = new fx.Accordion(myBox, myBoxOpen, {});
-
-
// Tool Tips for extra information
-
var as = [];
-
-
$S('a').each(function(a){
-
if (a.getAttribute('title')) as.push(a);
-
});
-
-
new Tips(as, {maxOpacity: 0.9, maxTitleChars: 25});
-
}
-
It’s a zipped up quicktime video.
If you download 7zip.org or izarc.org they handles 7z and are free. I am sure Winrar does as well and Winzip(I Think!) I don’t see why all Archive programs wouldn’t handle 7z since its an Open architecture so I hope they do.
I might do a google video post. I wasn’t thinking about since it had to be viewable in a class with a big projector.
Thanks!
The downside is… um… what kind of bizarre format is 7z?
The Positive side is that it was super easy to implement. Eg;
var myEffect = new fx.Accordion(myBox, myBoxOpen, {});I’d still like to see the video though (without downloading that codec thingamabob)
Hey Dustin, love the podcast I am subscribed to it :) . 7z isn’t a codec. It’s a Archive format like ZIP or RAR. If you have a Acrhive program it should handle that if not you can download a small app that uncompresses it @ 7zip.org .
I am just using that because the video is 110mb and well 7z compressed it down to 21mb making downloading faster. Once it is uncompressed though you can use quicktime or anything else that handles MOV files to play it.
110mb download or 21mb download … I went for what would be easier on bandwidth and allow people to get it faster. Sorry for the confusion I seriously thought people would know about 7z more. I suppose not.
GoogTube….hrhr….nice joke 8D
7zip is a compression format that compresses similar to RAR (sometimes smaller, sometimes larger) that is primarily used for torrents and is a complete waste of time. The majority of the time the compression advantage with 7z is negligible so just use a standard compression format
vtfwxnlw
zrcgzjki krxmfcwydps kdurok uvauqew
7z … is a complete waste of time
really you didn’t know LZMA compression that’s probably one of the best and is totally free ?
LZMA, used by Null Soft Installer (a big range of programs) and many other famous programs too … 7zip.org just allows You to download a free, simple and fast GUI (WinRar or WinZip like) to compress or uncompress “every kind” of archive.
It’s a must, not a waste of time, imho.
Good work about this post :)
I get “document.getElementsByClassName is not a function”
Thanks a lot for this video. It is really easy to follow. It has been helpful to me to understand how to use this wonderful feature of mootools…