Javascript/css Docks
A review of Mac-like Docks written in Javascript and/or CSS

These are all the JS/CSS docks I can find, some in several iterations. They vary in several ways. Some use one or more Javascript libraries some use none and do the same thing in a small amount of code. There's two or three libraries that get used by various of these.

They also differ in the way they operate and there are two modalities: Type I - one kind animates a sequence of the icon from short to small over a fixed period of time. The other, Type II, displays an icon of varying size as a function of distance from the icon. You can tell the difference by moving the mouse well away from the dock then moving it over one icon very quicky in one move. The former type will expand the icon in steps like a little movie, the latter will vary the icon in size as the mouse cursor gets closer.

There is an unfortunate side effect to the former method which presents as a sort of hysteresis - the icons can oscillate under some conditions and it makes it look sort of jerky. The latter type doesn't do that.

Some are really easy to modify, one in particular, jqdock, has taken on a life of it's own and is infinitly extensible while others can be a real pain to modify. But, in the end it's all code and can, with varying degrees of ease, be made to do anything.

These are just demonstrations of the code. Of course each icon is clickable and just a link, but they don't really do anything here on this page, click the link to see them in action.

aplweb apple holo hydro vrx wtf Movement is fairly smooth but not perfect, icon rendering is good. A fair compromise but not perfect. Type II and jerky. Go figure. fisheye Inline Javascript, no libraries. Slick little piece of code, very small and tight, uses no libraries whatsoever, but movement can be jerky at times. Type I. googx Google put up a Mac-like dock interface, then took it down the next day with no explanation. Not really THAT mac-dock-like, and somebody said it was more like AOL than OSX (fair point) but, it's a good example of sprite animation in html. Type I. icondock Derived from GoogleX. Possibly the worst for jerky movement but also possibly also the nicest icon rendering. Type I. jqdock Uses jquery.js Inspired by IconDock. Buddy has made a freaking system out of this code with more options and examples than any sane person would ever need. But it has that jerky sketchy problem with mouse movement. Type I.

ndesign Based on the Interface JQuery plugin. Only allows one icon so either the small or big one isn't going to look as good as it could. But the movement is nice and smooth. Type II. posabs Uses prototype.js Really rubbish. Included only as an example of how not to do it. Type II. safalra nobg From safalra.com Pain in the butt. It wants 4 different files for each icon and you have to make the reflection images manually. Smooth operation, isn't jerky and sketchy like some, but needs less retarded icon filename management. Image quality is of course superb - cause you're hand crafting the entire thing. Type I. yui3 interactive Fisheye menu similar the Mac OSX dock, as implemented in YUI3. Nice smooth movement, but no provision for a seperate icon in minimized form so it could look a bit better than it does. Type II.