Recent Weblogs

Links I like

A Fisheye for the Prototypejs Community

A Measurement of proximity to determine the magnification of the icon



What is a Fisheye?

The idea behind a fisheye control is a strip of icons, being vertical or horizontally laid out that reacts to the user's mouse as it approaches the icon. This control was made popular by Mac OSX "Dock".

Why use a Fisheye

It improves usability and reinforces to the user that this is an interactive component which is ready to respond to the user's action.

How do I use this Fisheye?

While there are plenty of implementations of this control, which I will link to at the bottom of the article. I believe this approach leaves less stress for the implementor than most. It of course uses prototype and harnesses the DOM Extension methods to enhance performance and reliability across the browser board. It also uses an event style architecture to allow for convienence of attaching methods to a particular item being clicked etc.

How can I extend this Fisheye?

As noted previously the component is built using prototypejs, the class structure allows itself to be extended very easily through techniques of inheritance. I've also attempted to insert a few hooks to make extension even easier, this is very similar to Thomas Fuchs' implementation of Effects and his options argument to allow for a form of composition.

Implementation

The component only effects three attributes, height, width and marginTop. Height and width im sure you expected but why bother with marginTop? Because if that isn't calculated in the scaling, as one grows to max height it will push all other icons in the toolbar down which creates a kind of "bouncing" effect, trust me it isn't pretty.

An HTML Microformat

The FishEyeToolBar class is expecting a specific microformat to work with, starting from the container, is expecting a list of img tags that will act as the icon to be scaled. You can modify this expectation to any CSS selector that descends from the root element by customizing the selector property in the options argument.

The Sword of CSS

So we've got HTML and Javascript at work here, but CSS has a pretty big role in implementing a smooth fisheye. The first big tip is to make sure you're FishEye element has the property text-align:center; this will make sure as the images scale that they stay centered! In my first attempts i was trying to calculate this myself, talk about a headache. Next is a proper marginTop As noted above you can get some horrid looking bouncing effect if this isn't set right, my rule of thumb is set the marginTop to be at least the height of the image that way as the image comes up to double its original height, it will have some margin to eat up before it starts to push the others down.

FishEyeToolBar

The FishEyeToolBar class acts as the super class, it listens to the mouseMove event on the containing object and collects the img elements to be constructed into FishEyeItem objects.

FishEyeToolBar options

{
	 selector : "img", // the selector that FishEyeToolBar uses to collect its icons.
	 createSub : this.createSub.bind(this), //Allows for a custom factory function to create the FishEyeItem object, or whatever you extend from it.
	 subOptions : {} // for convienence allows you to send options argument to the default createSub method.
};

FishEyeItem

The FishEyeItem class acts as a wrapper class for an img element. It provides easier, encapsulated logic to allow for less work by the FishEyeToolBar class.

FishEyeItem options

{
	scaleThrottle : 200
}

The scale throttle is pretty simple, it basically acts as the judge for saying is this mouseMovement within my range? If so it will calculate a value between 1 and 2 as a percentage to increase the icon by, the larger the throttle the bigger the effected proximity will be but this will in turn make for a slower, potentially smoother animation, this is something you'll have to mess with to truely perceive.

EventDispatcher

In order for the class objects to communicate with other objects they have inherited from the EventDispatcher class. This class was my attempt at custom events, but in the end just turned into a great class for implementing an observer pattern.

Demo

Looking for a working example? Inspired by the many comments below I have developed a page purely for the purpose of providing a demo. In further development I've also created a subclass to handle the behavior of a fisheye resting on the upper edge of a page that would need to expand down instead of up, check out the demo and you'll see what I mean.

Conclusion

Download prototype FishEye
This was a great project and although i am certainly not an animation designer/programmer i was able to produce the desired behavior by relying on the DOM and a decent observer pattern. I urge you to take a look at the source and produce your own algorithms for scaling, mine is quite vanilla, you'd just have to override the handleFishEye method in the FishEyeItem class.

Related Links

Comments

August 24, 2007wqf

its cool

August 28, 2007francois

i am from france, but i still like it

August 29, 2007jamie

if you click on an icon can it link to something? like an image?

September 03, 2007carlos

can you show an easier way to implement it
like for example something like

<script type='text/javascript' src='FishEye.js'></script>
<style type='text/css'>
#fishEye{
background-color:#CCCCCC;
padding:15px;
text-align:center;
height:100px;
overflow:hidden;
}
#fishEye div{
background-color:#fff;
}
#fishEye img{
width:50px;
height:50px;
margin-top:55px;
}

</style>

<script type='text/javascript'>

new FishEyeToolBar("fishEye");

</script>


<div id="fishEye">

<img src="/images/fisheye/My-Computer.png" />

<img src="/images/fisheye/My-Documents.png" />

<img src="/images/fisheye/My-Music.png" />

<img src="/images/fisheye/My-Network.png" />

<img src="/images/fisheye/My-Pictures.png" />

<img src="/images/fisheye/Printer.png" />

</div>

that is what i was trying todo, if you can provide a clear example that would be great,
thanks

September 03, 2007sascha

seems not to work with prototype 1.6.x due to event-issues.

September 06, 2007cnu.net.cn

i am from china ,and i like it very much!
i want know how to use it ? if i can set some opitions?

September 10, 2007stecher

where are the examples ?

September 12, 2007samuel lebeau

it rocks :)

September 25, 2007levent

help anyone could say how i can use it ??
for example : www.turkishairforce.org/ts but not work :(

September 29, 2007Mitro

Does anyone know of a site that gives a step by step guide to getting this to work?

October 24, 2007dan

it doesnt work :-(

October 29, 2007Snarp

How can people say it doesn't work, when you can view the code on the page for an example?

November 03, 2007asxs

s

November 09, 2007yeah

FUCK YEAH

November 15, 2007jeremy

I've made a few changes to the code to get some things working. Mainly the options = {} weren't getting applied and I added a couple items to make it more custom, like resetTime if mouse goes out, made sure scale works and scaleThrottle (affects neighbors). Also removed the click handlers since I'm doing that through hrefs
email me at supersloper.net if you want the code, I can supply you with a sample too... If I get time I'll post it on my site with sample HTML etc...

January 10, 2008Thomas K. Nielsen

Nice little FishEye tool. Thanks for providing it.

January 14, 2008Kelly

I've noticed that the icons don't always show up on first load - but then after a refresh it works fine. This is on two PCs, with IE 7 and FF2. Anyone else run into this problem?

February 05, 2008Matt

Hey Kelly, I believe this problem was due to the height not being explicitly set. When the object went to reset itself, the "originalHeight" was 0 and thus minimized the object beyond visible porportions.

February 29, 2008a

Let's try it

March 04, 2008San4OZE

Nice

March 06, 2008terrasse

Works great ! Thanks a lot.

March 22, 2008Autocad

Thanks a lot.

April 22, 2008MikeW

Hi, great Script !
but the "ScaleFactor" has no finction ?
Any value has the same ScaleEffekt

April 26, 2008richai

download

June 19, 2008andres

This control allow define a caption over the img element?? like a text
Thanks

June 30, 2008Horoscope

Yes download !

July 18, 2008Tim

which height needs to be set to fix this problem (I've noticed that the icons don't always show up on first load)

July 24, 2008Bill

Works great and I will use it soon. How can I add target="_blank" to the attributes of the image? This is essential when linking to another web site. bill@journeyi.net

Name
Site
Comment
  CAPTCHA Image
Reload Captcha Image
Captcha