Flickable is a script made by request for Satsumac Software, it imitates an effect first made popular by Apple on their recent website redesign (as of 2007). This should satisfy the urges of the Apple loving masses!

It uses fancy stuff like relative positioning, negative margins, z-order’s to create the layering effect, meaning each item in the flickable element can have a transparent freeform background and layer over each other quite naturally.

It works with Safari 3b1, IE 6-7, Firefox 2.0, Opera 9. Just make sure IE is working in standards mode! And take a lookie at the code in the demo to see what css is needed to get IE working right.

Usage

Your copy of mootools will need to include Class.Extras, Fx.Elements, Element, Element.Event, Element.Selectors, and Element.Dimentions. Make sure to load flickable.js after mootools.

Next you’ll need to tell the script to make a certain element in to a Flickable! You do that with javascript like this:–

window.addEvent(’load’, function () {
  window.flickname = new Flickable(’id-of-element’, { options… });
});

Change out ‘id-of-element’ for the element who’s children should overlap each other and flick about, or you can pass an element object if you like. Next in options you can set these following pieces of info about how it should stack up and behave. You’ll probably want to at least set miniHeight, and maxiHeight too if you want them to still be slightly under each other even on the open one.

• miniHeight: This is how much of the bottom of each pane is peeking out under the one above it when it’s closed, in pixels. It defaults to 50.
• maxiHeight: How many pixels from the bottom to show on an opened up pane. This defaults to the height of the pane, but it’s sometimes useful to set a smaller number than the actual height to keep an overlapping look.
• activeClass: This class gets added to the open pane so you can make it light up or something, it defaults to ’active’.
• activationEvent: You can set this to ’click’ if you don’t want hovering to set it off. It defaults to ’mousemove’ which means it is set off by a mouse coming over one of the panes.
• effect: You can set any effect options like {transition: Fx.Transitions…} here if you like. Check out the moo docs for more info!

When you take a look at the demo, you should see just what I mean. The <img> tags in the demo could be any kind of html tags, one per item that flicks. You could use <div>‘s, or if you want each part to be a link you could use <a> tags, but remember to set them to display: block; in your CSS!

Advanced Usage

If you want to change the currently open pane in a script, you can call the .flickTo() method on the flickable object, passing it an id or an actual element object pointing to one of the children.

Updates

Version 1.3: Fixes a pretty major issue where flickable would suddenly close all items if a flickable element contained child tags instead of just images like my demo, as soon as those tags where moused over. This bug has been driving me nuts for ages! event.target, I’m looking at you. Anyone whose had trouble with flickable in the past, try it out now! It probably works all of a sudden. :)

Version 1.2: Can set the new activationEvent option to click if you’d like it to work on clicks rather than mouse hovering. It defaults to mousemove rather than mouseover due to implementation details.

Version 1.1: Now adds class name active to the currently open item so you can style it up! Demo updated to work in IE 6 and 7.

You can download the source code, or see a demo!

Flickable is released as public domain donationware by Jenna Fox.