December 15, 2006

Fishy Eyes for Web UIs

The other night my trusty feedreader alerted me to a Nitobi post demonstrating a fisheye menu (think Mac OS X dock) in javascript as a part of their upcoming library. A neat effect, to be sure…and useful as well; menu design is so often reduced to a balancing act between the number of items displayed and the actual visibility of each. I fully expect this type of widget to become much more common on the web as the major js animation toolkits begin to offer it.

Searching for a way to do this with script.aculo.us or moo.fx yielded no result, but I did come across another interesting (slightly lesser-known) toolkit - Dojo. I played with it for a few hours and loved it’s functionality, but decided to abandon it for philosophical reasons. I may see about implementing the fisheye widget in script.aculo.us if I ever have time…sooner or later someone has got to.

The above example pulls images from the Flickr API based on the tag you search for, sorted by interestingness. If you want to play around with the code on your own server, you need Dojo and phpFlickr in the same directory as the script. You can get a Flickr API key here. Enjoy!

This is not a test of the emergency broadcast system!

Comment by Logan — December 15, 2006 @ 3:00 am

Hello webmaster I like your post…

Comment by aSKer — March 10, 2009 @ 10:35 am

ohh… nice post :)

Comment by Envy — March 10, 2009 @ 10:39 am

It was interesting to browse trough :-) keep up the good work and thanks for sharing.

Comment by timur senga — June 17, 2009 @ 8:28 am

Leave a reply

Inspiration

6pli Tumblr Aptana IDE Markus Homm Mint Humanized Rawkus Records // All Things Hip Hop // www.rawkus.com The New York Times WeShouldDoItAll Justinsomnia Deluxe Digital Media Democracy Internet Tv Take More Photos fluxiom - capture, manage, access and deliver content across your enterprise Olivier Danchin Jason Santa Maria Tubetorial Ajaxian Raincity Studios 88 Miles - Simple time tracking Welcome to Zopa (UK) - The first lending and borrowing exchange Inspirational design for a web2.0 homepage