I’ve been using Dojo’s FisheyeList widget (think of Mac OSX’s dock) in an internal app I’ve been
building for TheLadders.com. It’s a totally killer piece of script,
and works very well right out of the box. However, there’s not much (read: there’s no) documentation on using it. So, in the hope of
helping someone out, here’s what I’ve figured out so far. (I’m working on dojo version 0.31, and by no means is this list exhaustive).

• Using dynamic images: You can add list items (dojo-FisheyeListItems, to be exact) at run-time with JavaScript. Just document.write them into your dojo-FisheyeList container, and the widget will pick them up. This allows you to grab images dynamically with another script, and inject them into your list.
• What do the properties of the dojo-FisheyeList container actually do? This:
  • dojo:itemWidth - The width of the item in the "dock" before mouseover (in pixels).
  • dojo:itemHeight - The height of the item in the dock before mouseover (in pixels).
  • dojo:itemMaxWidth - The biggest possible width your image can have on full mouseover (in pixels).
  • dojo:itemMaxHeight - The biggest possible height your image can have on full mouseover (in pixels).
  • dojo:orientation - Either "horizontal" or "vertical".
  • dojo:effectUnits - The distance your mouse can be from the widget before it activates. Lower values mean your mouse must get closer to
    the widget strip before the icons puff up; higher values mean the widget activates at greater distances. Decimal values are OK.
  • dojo:attachEdge - Specifies which section of an icon triggers the "puff" effect. Can be "top", "bottom",
    "left", "right", or "middle". "middle" creates a really strange effect.
  • dojo:labelEdge - Specifies where the image’s label displays. "top" and "bottom" are the only choices here. If you
    enter anything other than those two, the widget defaults to "top".
  • You don’t need to add a label to your images. If you don’t add the "caption" attribute to a dojo-FisheyeListItem,
    the caption won’t display for that item.
  • dojo:enableCrappySvgSupport - I tried toggling this between quot;true" and "false", but really noticed no difference.
    I’ve been testing in IE 6.0 and FireFox 1.5, so perhaps this does something in an older (or different) browser?

In all, this widget gives you a great effect with a very quick installation. Does anyone else have any tips for using the FisheyeList?

technorati tags:dojo, javascript, dojo FisheyeList, dock, css, web development, dojo toolkit

This entry was posted on Wednesday, October 4th, 2006 at 5:58 pm and is filed under dhtml, javascript, learn. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.